/* =====================================================================
   tokens.css — SINGLE SOURCE OF TRUTH (v3 „Das Frachtpapier")
   Helles technisches Editorial: warmes Papier, schwarzblaue Tinte,
   Blau für Routen/Diagramme, Signal-Rot NUR für CTAs.
   Jeder Agent verwendet AUSSCHLIESSLICH diese Variablen bzw. die
   semantischen --c-* Variablen aus base.css.
   ===================================================================== */

:root {
  /* --- Marken-DNA, invertiert angewendet --- */
  --color-paper:        #f2ede2; /* Seitengrund: warmes Papier */
  --color-paper-raised: #f8f5ee; /* helle Karten / erhöhte Flächen */
  --color-paper-deep:   #e8e1d0; /* vertiefte Flächen / Wells */
  --color-ink:          #192026; /* Tinte (ehem. Hintergrundfarbe) */
  --color-fill:         #416aee; /* Routen, Diagramme, Grafik-Akzente */
  --color-fill-ink:     #2944ae; /* Blau als KLEINTEXT (AA auf Papier / heller Sektion) */
  --color-fill-light:   #9db4f5; /* Blau als KLEINTEXT (AA auf Nacht) */
  --color-accent:       #e74d3d; /* NUR CTAs + Mikro-Highlights */
  --color-accent-hover: #d2382a; /* Hover auf hellem Grund */

  /* --- Dunkle Sections (04 Fakten, 10 Termin) --- */
  --color-night:          #192026;
  --color-night-raised:   #20282f;
  --color-night-deep:     #131a1f;
  --color-cream:          #eee5d7;

  /* --- Tinten-Stufen auf Papier --- */
  --color-ink-muted:  rgba(25, 32, 38, 0.64);  /* untergeordneter Lesetext: OK */
  --color-ink-subtle: rgba(25, 32, 38, 0.38);  /* NUR dekorativ */
  --color-line:        rgba(25, 32, 38, 0.16); /* Hairlines */
  --color-line-strong: rgba(25, 32, 38, 0.32);

  /* --- Cream-Stufen auf Nacht --- */
  --color-cream-muted:  rgba(238, 229, 215, 0.68);
  --color-cream-subtle: rgba(238, 229, 215, 0.4);
  --color-line-dark:        rgba(238, 229, 215, 0.14);
  --color-line-dark-strong: rgba(238, 229, 215, 0.28);

  /* --- Soft-Tints (Flächen, nie Text) --- */
  --color-fill-soft:   rgba(65, 106, 238, 0.12);
  --color-accent-soft: rgba(231, 77, 61, 0.1);

  /* --- Schrift --- */
  --font-display: 'Archivo', 'Inter', system-ui, sans-serif;
  --font-serif:   'Instrument Serif', Georgia, serif; /* NUR italic-Akzente/Zitat */
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  --stretch-display: 115%; /* Archivo variable width: industriell-breit */

  /* --- Fluid Type-Scale --- */
  --text-mono:    0.78rem;                               /* Eyebrows, Marginalien */
  --text-sm:      clamp(0.85rem, 0.82rem + 0.2vw, 0.95rem);
  --text-base:    clamp(1rem, 0.96rem + 0.3vw, 1.125rem);
  --text-lg:      clamp(1.2rem, 1.1rem + 0.6vw, 1.5rem);
  --text-xl:      clamp(1.6rem, 1.3rem + 1.4vw, 2.5rem);
  --text-2xl:     clamp(2.1rem, 1.5rem + 2.9vw, 4.2rem);
  --text-display: clamp(2.9rem, 1.6rem + 6.5vw, 8rem);   /* Hero-H1 */

  --leading-display: 0.98;
  --leading-tight:   1.05;
  --leading-snug:    1.2;
  --leading-body:    1.65;
  --tracking-mono:   0.14em;
  --tracking-tight:  -0.025em;

  /* --- Spacing (8px-Basis) --- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-section: clamp(6rem, 4.5rem + 7vw, 11rem);

  /* --- Layout --- */
  --container: 1360px;
  --gutter:    clamp(1.25rem, 0.5rem + 3vw, 4rem);
  --grid-cols: 12;

  /* --- Radius (Frachtpapier = scharf) --- */
  --radius-sm: 4px;
  --radius:    8px;

  /* --- Motion --- */
  --ease-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-power: cubic-bezier(0.6, 0.01, 0.05, 0.95);
  --dur-fast:   0.3s;
  --dur:        0.6s;
  --dur-slow:   0.9s;
  --dur-reveal: 1s;

  /* --- Elevation (auf Papier: weich + warm) --- */
  --shadow-soft: 0 24px 60px -28px rgba(25, 32, 38, 0.28);
  --shadow-lift: 0 12px 32px -16px rgba(25, 32, 38, 0.22);

  /* --- Z-Index --- */
  --z-header:  100;
  --z-overlay: 200;
}