/* ============================================================================
   TYMBO · Design Tokens  (Arbeitsname, siehe 00-START-HERE.md → Entscheidungs-Log)
   Single source für Farben, Typo, Spacing, Motion. Website und Previews lesen NUR hier.
   Kontrastwerte (WCAG, berechnet): Ink/Ice 11.0 · Ink/Frost 14.1 · Neon/Ink 11.6
   VERBOTEN: Neon als Textfarbe auf hellem Grund (1.22). Neon nur als Fläche, oder Text auf Ink.
   ========================================================================= */

:root {
  /* -- ICE (Brand-Primary, hellblaue Arktis) ------------------------------ */
  --ice-50:  #F4FAFD;   /* Surface-Frost */
  --ice-100: #E3F3FB;
  --ice-200: #BFE3F5;   /* Brand-Primary-Ice  ← Anker */
  --ice-300: #8FCBEA;
  --ice-400: #5FB0DB;
  --ice-500: #3C8DBF;   /* Brand-Deep-Glacier (nur Flächen/Icons, Text < 3.5) */
  --ice-600: #2C6F9C;   /* kleinster Textblau-Ton auf Frost (5.2) */
  --ice-700: #1F5476;
  --ice-800: #153E58;
  --ice-900: #0B2A3C;   /* Ink-Deep-Fjord  ← Textfarbe */

  /* -- NEON (Accent, Berlin) ---------------------------------------------- */
  --neon-100: #EEFBB0;
  --neon-500: #C8F31D;  /* Accent-Neon  ← Anker. Nur Fläche, oder Text auf Ink */
  --neon-700: #5E7A12;  /* Accent-Moss (Text auf Frost 4.7, auf Ice nur groß 3.6) */

  /* -- CONCRETE (Neutral) -------------------------------------------------- */
  --concrete-100: #F0F2F2;
  --concrete-200: #E4E7E8; /* Surface-Concrete */
  --concrete-400: #9AA3A7;
  --concrete-700: #4A5559;

  /* -- Semantik ------------------------------------------------------------ */
  --color-bg:         var(--ice-50);
  --color-bg-alt:     var(--ice-200);
  --color-bg-dark:    var(--ice-900);
  --color-text:       var(--ice-900);
  --color-text-muted: var(--concrete-700);
  --color-text-on-dark: var(--ice-50);
  --color-accent:     var(--neon-500);
  --color-accent-text-on-light: var(--neon-700);
  --color-line:       var(--ice-900);
  --color-alert:      #E5484D;

  /* -- Typografie ---------------------------------------------------------- */
  --font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Inter', ui-sans-serif, system-ui, sans-serif;

  --fs-h1: clamp(3rem, 9vw, 8rem);     --lh-h1: 0.92; --ls-h1: -0.03em;  --fw-h1: 800;
  --fs-h2: clamp(2.25rem, 5vw, 4.5rem); --lh-h2: 0.98; --ls-h2: -0.02em;  --fw-h2: 800;
  --fs-h3: clamp(1.5rem, 2.6vw, 2.25rem); --lh-h3: 1.1; --ls-h3: -0.01em; --fw-h3: 700;
  --fs-h4: 1.25rem;                     --lh-h4: 1.2;  --ls-h4: 0;        --fw-h4: 700;
  --fs-body: 1.0625rem;                 --lh-body: 1.55;
  --fs-small: 0.875rem;
  --fs-marquee: clamp(2.5rem, 7vw, 6rem);

  /* -- Spacing (8er-Raster) / Radius / Linien ----------------------------- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 16px; --space-4: 24px;
  --space-5: 40px; --space-6: 64px; --space-7: 112px; --space-8: 176px;
  --frame: clamp(12px, 3.2vw, 48px);   /* Außenabstand links/rechts/oben: Viewport wirkt zentraler */
  --radius-sm: 8px; --radius-md: 20px; --radius-pill: 999px;
  --stroke: 2.5px;           /* gilt für Illustrationen UND UI-Linien */
  --shadow-hard: 6px 6px 0 var(--ice-900);   /* flat-hard statt weich: Kreisler-Verspieltheit */

  /* -- Motion --------------------------------------------------------------- */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --dur-fast: 160ms; --dur-base: 320ms; --dur-slow: 700ms;
  --marquee-speed: 28s;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --marquee-speed: 0s; }
}