/* Hallmark · tokens · genre: modern-minimal · theme: Cobalt
 * paper band: cool light (L 98.5%) · display style: grotesk-sans · accent hue: electric cobalt (256)
 * Portables Design-System für Speaktype. Jede Farbe und jede Schrift im Build
 * referenziert ein Token aus dieser Datei — keine Inline-Werte irgendwo.
 * Kontrastwerte hinter den Tokens sind gegen --color-paper bzw. --color-graphite gerechnet.
 */

:root {
  /* ── Paper & Flächen ──────────────────────────────────────────── */
  --color-paper:        oklch(98.5% 0.004 250);
  --color-paper-2:      oklch(96.8% 0.006 252);
  --color-paper-3:      oklch(94.5% 0.008 252);
  --color-paper-blur:   oklch(98.5% 0.004 250 / 0.82);   /* Nav-Overlay über Inhalt */

  /* ── Ink ──────────────────────────────────────────────────────── */
  --color-ink:          oklch(24% 0.020 258);   /* 11.1:1 */
  --color-ink-2:        oklch(34% 0.018 257);   /*  7.8:1 */
  --color-muted:        oklch(46% 0.016 256);   /*  5.0:1 */
  --color-muted-2:      oklch(48.5% 0.014 255); /*  4.6:1 */

  /* ── Linien ───────────────────────────────────────────────────── */
  --color-rule:         oklch(90% 0.008 252);
  --color-rule-2:       oklch(82% 0.010 252);

  /* ── Der eine dunkle Takt: Graphit ────────────────────────────── */
  --color-graphite:     oklch(22% 0.016 260);
  --color-graphite-2:   oklch(26% 0.016 260);
  --color-graphite-3:   oklch(30% 0.016 260);
  --color-dark-ink:     oklch(94% 0.006 250);   /* 10.6:1 auf Graphit */
  --color-dark-muted:   oklch(70% 0.012 254);   /*  5.4:1 auf Graphit */
  --color-dark-rule:    oklch(33% 0.016 258);

  /* ── Das eine Signal ──────────────────────────────────────────── */
  --color-accent:       oklch(58% 0.200 256);   /* Marken-Signal: Rahmen, Marken, Display-Wörter */
  --color-accent-fill:  oklch(47% 0.200 258);   /* Flächen, die Text tragen — 4.8:1 mit accent-ink */
  --color-accent-fill-h:oklch(40% 0.190 258);   /* Hover derselben Flächen — 6.3:1 */
  --color-accent-deep:  oklch(45% 0.200 257);   /* Akzent als Fließtext auf Paper — 5.2:1 */
  --color-accent-lift:  oklch(72% 0.160 256);   /* Akzent auf Graphit — 5.7:1 */
  --color-accent-soft:  oklch(93% 0.045 256);
  --color-accent-ink:   oklch(99% 0.005 250);
  --color-focus:        oklch(47% 0.200 258);   /* 4.8:1 gegen Paper */
  --color-scrim:        oklch(24% 0.020 258 / 0.42);

  /* ── Formularzustände ─────────────────────────────────────────── */
  /* Beide sind als Textfarbe auf Paper geprüft (4.6:1 bzw. 5.0:1). Farbe
     allein signalisiert nie einen Zustand — es steht immer Text daneben. */
  --color-danger:       oklch(48% 0.170 27);
  --color-danger-soft:  oklch(96% 0.020 27);
  --color-success:      oklch(46% 0.130 150);
  --color-success-soft: oklch(96% 0.025 150);

  /* ── Readout-Tokens ───────────────────────────────────────────── */
  --color-tok-key:      oklch(72% 0.160 256);
  --color-tok-str:      oklch(88% 0.020 250);
  --color-tok-punct:    oklch(66% 0.014 256);   /* 4.8:1 auf Graphit */

  /* ── Typografie ───────────────────────────────────────────────── */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Inter Tight", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  --text-2xs:      0.6875rem;   /* 11px — nur Mono-Readout-Labels */
  --text-xs:       0.75rem;     /* 12px */
  --text-sm:       0.875rem;    /* 14px */
  --text-base:     1.0625rem;   /* 17px — Fließtext-Untergrenze */
  --text-md:       1.1875rem;
  --text-lg:       1.375rem;
  --text-xl:       1.75rem;
  --text-2xl:      2.25rem;
  --text-3xl:      2.75rem;
  --text-display-s: clamp(2.125rem, 3.2vw + 1rem, 3.125rem);
  --text-display:   clamp(2.5rem, 3.9vw + 1rem, 4.125rem);

  /* ── Raum (4pt) ───────────────────────────────────────────────── */
  --space-3xs: 0.125rem;  /*  2px */
  --space-2xs: 0.25rem;   /*  4px */
  --space-xs:  0.5rem;    /*  8px */
  --space-sm:  0.75rem;   /* 12px */
  --space-md:  1rem;      /* 16px */
  --space-ml:  1.25rem;   /* 20px */
  --space-lg:  1.5rem;    /* 24px */
  --space-xl:  2.5rem;    /* 40px */
  --space-2xl: 4rem;      /* 64px */
  --space-3xl: 6rem;      /* 96px */
  --space-4xl: 9rem;      /* 144px */

  --page-gutter: clamp(1.25rem, 5vw, 5.5rem);
  --measure: 62ch;
  /* Gemeinsame Höhe für Button und Eingabefeld. Beide leiten sich daraus ab,
     damit sie nebeneinander exakt bündig stehen. 48px liegt über der
     44px-Untergrenze für Tippziele. */
  --control-h: 48px;

  /* ── Linien & Radien ──────────────────────────────────────────── */
  --rule-hair: 1px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  /* ── Tiefe — genau drei Einsätze auf der ganzen Seite ─────────── */
  --shadow-whisper: 0 1px 2px oklch(24% 0.020 258 / 0.06);
  --shadow-signal:  0 8px 22px -12px oklch(58% 0.200 256 / 0.55);
  --shadow-modal:   0 24px 60px -28px oklch(24% 0.020 258 / 0.5);

  /* ── Motion ───────────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --dur-micro: 110ms;
  --dur-short: 200ms;
  --dur-long:  420ms;

  /* ── Z-Skala ──────────────────────────────────────────────────── */
  --z-base: 1;
  --z-raised: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-sticky-nav: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-tooltip: 600;
}