/* Hallmark · tokens · Meisterarbeit — Alexander Pieprz
 * route: custom (tuned) · vibe: "Blaupause, Werkstattweiss, Material, praezise"
 * Anker: das Markenblau aus dem Logo, #0036FF ≈ oklch(48.4% 0.284 264)
 * axes: light / display-condensed / cool (264°)
 */

:root {
  /* ---- Farbe · OKLCH, Anker-Hue 264° (Markenblau) ---------------------- */
  --color-paper:        oklch(98%   0.004 264);  /* Werkstattweiss          */
  --color-paper-2:      oklch(95.5% 0.007 264);  /* eine Ebene tiefer       */
  --color-paper-3:      oklch(92%   0.010 264);  /* Panels, Bildrahmen      */
  --color-rule:         oklch(86%   0.014 264);  /* Trennlinien             */
  --color-rule-2:       oklch(91%   0.011 264);  /* sekundaere Linien       */
  --color-neutral:      oklch(57%   0.016 264);  /* stille Typo, gross      */
  --color-muted:        oklch(44%   0.019 264);  /* zurueckgenommener Text  */
  --color-ink-2:        oklch(32%   0.024 264);  /* Fliesstext              */
  --color-ink:          oklch(19%   0.032 264);  /* Ueberschriften, Tiefe   */
  --color-accent:       oklch(48.4% 0.284 264);  /* #0036FF · Signal        */
  --color-accent-2:     oklch(62%   0.210 258);  /* helleres Blau auf Dunkel*/
  --color-accent-ink:   oklch(98%   0.004 264);  /* Text auf Blau           */
  --color-focus:        oklch(52%   0.284 264);

  /* Auf dunklem Grund (Baustellen-Band, Footer) */
  --color-deep:         oklch(19%   0.032 264);
  --color-deep-2:       oklch(24%   0.034 264);
  --color-deep-rule:    oklch(33%   0.030 264);
  --color-deep-ink:     oklch(97%   0.006 264);
  --color-deep-muted:   oklch(72%   0.018 264);

  /* ---- Schrift ---------------------------------------------------------- */
  --font-display: "Big Shoulders Display", "Big Shoulders", "Arial Narrow", sans-serif;
  --font-body:    "IBM Plex Sans", ui-sans-serif, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, monospace;

  /* Skala 1.25 (grosse Terz) */
  --text-xs:   0.75rem;
  --text-sm:   0.8125rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.375rem;
  --text-xl:   1.75rem;
  --text-2xl:  2.25rem;

  --text-display:    clamp(2.5rem, 4.5vw + 1rem, 5rem);
  --text-display-s:  clamp(1.9rem, 2.6vw + 1rem, 3.25rem);
  /* Marquee-Ausnahme (Macrostructure 03): kondensierte Versalien, randbuendig */
  --text-marquee:    clamp(3.1rem, 12.5vw, 10.5rem);

  /* ---- Raum · 4pt-Basis -------------------------------------------------- */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;

  --page-gutter: clamp(1.25rem, 5vw, 5.5rem);
  --measure: 62ch;

  /* ---- Linien & Radien ---------------------------------------------------- */
  --rule-hair:  1px;
  --rule-thick: 4px;
  --radius-sm:  2px;
  --radius-md:  4px;
  --radius-pill: 999px;

  /* ---- Bewegung ----------------------------------------------------------- */
  --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: 120ms;
  --dur-short: 220ms;
  --dur-long:  420ms;

  /* ---- Ebenen -------------------------------------------------------------- */
  --z-under:    0;
  --z-base:     1;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    400;
  --z-toast:    500;
  --z-tooltip:  600;
}