/* Hallmark · genre: modern-minimal · macrostructure: Workbench · theme: Cobalt
 * enrichment: none · nav: N9 edge-aligned minimal · footer: Ft4 dense colophon
 * tone: utilitarian · anchor hue: 256 (electric cobalt)
 * axes: paper-band=cool-light · display-style=grotesk-sans · accent-hue=cool
 * faces: Familjen Grotesk display + IBM Plex Sans body, NOT Cobalt's prescribed
 * Space Grotesk + Inter. Both swapped 2026-09-08 on the user's instruction after
 * the impeccable overused-font rule flagged each in turn. Same grotesk-sans axis,
 * same instrument-panel register; IBM Plex Sans is also the natural sibling of
 * JetBrains Mono, which every label on the page already uses.
 *
 * Design tokens for the LiteLLM Companion. Every colour and every font in
 * app.css references a name from this file - no inline hex, no inline oklch.
 * Portable: drop this file into another project and the vocabulary comes with it.
 */

:root {
  color-scheme: light dark;

  /* --- type ------------------------------------------------------------- */
  --font-display: "Familjen Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body:    "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.8125rem;
  --text-base: 0.875rem;
  --text-md:   1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.375rem;
  --text-2xl:  1.75rem;

  --lh-tight: 1.12;
  --lh-body:  1.55;

  --track-mono: 0.06em;
  --track-display: -0.02em;

  /* --- space (4pt scale) ------------------------------------------------- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2rem;
  --space-xl:  3rem;
  --space-2xl: 4rem;

  /* --- shape ------------------------------------------------------------- */
  --radius-sm: 6px;    /* drawn with a ruler - never a pill */
  --radius-md: 10px;
  --rule: 1px;

  /* --- motion ------------------------------------------------------------ */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;

  /* --- layer ------------------------------------------------------------- */
  --z-sticky-nav: 300;

  /* --- colour · light ---------------------------------------------------- */
  --color-paper:       oklch(98.5% 0.004 250);
  --color-paper-2:     oklch(96.3% 0.005 251);
  --color-paper-3:     oklch(93.2% 0.007 252);
  --color-ink:         oklch(24%   0.020 258);
  --color-ink-2:       oklch(34%   0.018 257);
  --color-muted:       oklch(47%   0.016 256);
  --color-rule:        oklch(89%   0.008 252);
  --color-rule-2:      oklch(79%   0.012 254);

  --color-accent:      oklch(52%   0.190 256);
  --color-accent-ink:  oklch(99%   0.004 250);
  --color-accent-soft: oklch(94%   0.035 256);

  --color-ok:          oklch(45%   0.130 155);
  --color-warn:        oklch(52%   0.140 70);
  --color-err:         oklch(48%   0.190 25);
  --color-err-soft:    oklch(95%   0.030 25);

  --color-focus:       oklch(52%   0.190 256);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-paper:       oklch(18%   0.014 260);
    --color-paper-2:     oklch(21.5% 0.015 260);
    --color-paper-3:     oklch(26%   0.016 260);
    --color-ink:         oklch(96%   0.006 250);
    --color-ink-2:       oklch(87%   0.008 252);
    --color-muted:       oklch(66%   0.014 254);
    --color-rule:        oklch(30%   0.014 258);
    --color-rule-2:      oklch(40%   0.016 258);

    --color-accent:      oklch(70%   0.170 254);
    --color-accent-ink:  oklch(16%   0.020 260);
    --color-accent-soft: oklch(30%   0.060 256);

    --color-ok:          oklch(74%   0.150 155);
    --color-warn:        oklch(80%   0.140 75);
    --color-err:         oklch(72%   0.170 25);
    --color-err-soft:    oklch(27%   0.070 25);

    --color-focus:       oklch(72%   0.160 254);
  }
}