/* ============================================================================
   Eyas — Design Tokens  (Source of Truth: docs/Branding.md §4, web/app/globals.css)
   Marke: Eyas. Interner Code-Name: Sentinel. Near-monochrome + EINE Signaturfarbe
   (Arctic Steel). Warm-Akzent (Raptor Gold) NUR fuer menschlich/positive Momente.
   Diese Datei wird von ALLEN Sektionen geteilt. Sektionen erfinden keine Farben.
   ========================================================================== */

:root {
  /* ── Marken-Rohfarben (docs/Branding.md §4) ───────────────────────────── */
  --eyas-canvas:      #0A0E14;  /* Near-Black, kalter Stich, nie reines Schwarz */
  --eyas-panel:       #0F1620;
  --eyas-glass-base:  #161E2B;
  --eyas-steel:        #AFC8E4;  /* Signatur — Marke, Info, Fokus */
  --eyas-frost:       #E2EEFA;  /* Frost-Highlight — Hover/aktiv, lebendiges Glas */
  --eyas-deep:        #6E8AAB;  /* Deep Steel — Pressed/sekundaer */
  --eyas-frost-white: #F4FAFD;  /* Klarheits-Momente, Key-Data */
  --eyas-gold:       #E3A554;  /* Warm-Akzent — NUR menschlich/positiv, winzig */
  --eyas-warn:        #E8A23D;
  --eyas-critical:    #C9485F;

  /* ── Hintergrund-Ebenen ────────────────────────────────────────────────── */
  --bg-base:  var(--eyas-canvas);
  --bg-deep:  #05070D;
  --bg-elev:  var(--eyas-panel);
  --bg-stage: radial-gradient(120% 120% at 50% 0%, #102234 0%, #0A1422 45%, var(--eyas-canvas) 100%);

  /* ── Glas-Rezeptur ─────────────────────────────────────────────────────── */
  --glass-fill:      rgba(150, 195, 255, 0.045);
  --glass-fill-hi:   rgba(150, 195, 255, 0.075);
  --glass-border:    rgba(186, 216, 250, 0.10);
  --glass-border-hi: rgba(180, 220, 255, 0.28);
  --glass-highlight: rgba(255, 255, 255, 0.16);
  --glass-blur: blur(22px) saturate(132%);  /* app-weit, deckungsgleich mit DESIGN.md §3 */

  /* ── Akzent / Aurora ───────────────────────────────────────────────────── */
  --accent:        var(--eyas-steel);
  --accent-strong: var(--eyas-deep);
  --accent-bright: var(--eyas-frost);
  --accent-white:  var(--eyas-frost-white);
  --accent-steel:  #A9C0D6;
  --aurora:      linear-gradient(135deg, var(--eyas-steel) 0%, var(--eyas-frost) 42%, var(--eyas-frost-white) 66%, var(--accent-steel) 100%);
  --aurora-soft: linear-gradient(135deg, rgba(175,200,228,.22), rgba(226,238,250,.10));
  --glow-steel:   rgba(175,200,228,0.45);
  --glow-frost:  rgba(186,212,240,0.80);

  /* ── Warm (sparsam!) ───────────────────────────────────────────────────── */
  --warm: var(--eyas-gold);  --warm-glow: rgba(227,165,84,0.32);

  /* ── Status ────────────────────────────────────────────────────────────── */
  --status-clear: #8FCDB4;  --status-warn: var(--eyas-warn);  --status-stop: var(--eyas-critical);

  /* ── Text ──────────────────────────────────────────────────────────────── */
  --text-hi:  #EFF5FF;
  --text-mid: #BACADE;
  --text-lo:  #8598AF;
  --text-faint: #788799;  /* >=4.5:1 auf Canvas/Glas (WCAG AA fuer funktionale Mikro-Labels) */
  --text-on-accent: #04101C;

  /* ── Typografie (Geist, eine disziplinierte Leiter) ────────────────────── */
  --font-sans: "Geist", system-ui, -apple-system, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", monospace;
  --tracking-tight: -0.02em;
  --tracking-snug:  -0.01em;
  --tracking-wide:   0.14em;
  --tracking-wider:  0.28em;

  /* Fluid type scale (wide, editorial). clamp(min, vw, max). */
  --fs-display: clamp(3.2rem, 8.5vw, 8.5rem);   /* Hero */
  --fs-h1:      clamp(2.4rem, 5.2vw, 4.8rem);
  --fs-h2:      clamp(1.9rem, 3.6vw, 3.2rem);
  --fs-h3:      clamp(1.35rem, 2.1vw, 1.9rem);
  --fs-lead:    clamp(1.1rem, 1.5vw, 1.4rem);   /* groesser Body / Subline */
  --fs-body:    clamp(1rem, 1.15vw, 1.125rem);
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;
  --fs-eyebrow: 0.78rem;

  /* ── Spacing rhythm (8pt) ──────────────────────────────────────────────── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px;
  --section-pad: clamp(5rem, 11vh, 11rem);      /* vertikaler Sektions-Abstand */
  --container:   1320px;                         /* breite, editoriale Darstellung */
  --container-wide: 1560px;
  --gutter: clamp(1.25rem, 4vw, 4rem);

  /* ── Radien ────────────────────────────────────────────────────────────── */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-2xl: 32px; --r-pill: 999px;

  /* ── Motion ────────────────────────────────────────────────────────────── */
  --ease:       cubic-bezier(0.22, 1, 0.36, 1);   /* ease-out-quart, Marken-Easing */
  --ease-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms; --dur-base: 240ms; --dur-slow: 400ms; --dur-slower: 700ms;

  /* ── Z-Index Leiter ────────────────────────────────────────────────────── */
  --z-bg: -10; --z-base: 0; --z-raised: 10; --z-sticky: 40; --z-nav: 100; --z-modal: 1000;
}