/* =========================================================================
   tokens.css — Design-Tokens (Single Source of Truth)
   Bindend aus Bauplan Abschnitt 2. Kein Hardcoded-Hex sonst irgendwo.
   ========================================================================= */

:root {
  /* ---------- Farben (v2: dunkel + Neon-Übergang, auf Fatihs Wunsch 2026-07-08) ---------- */
  --c-midnight:        #06070D;  /* Primärhintergrund, fast schwarz mit kühlem Blauton */
  --c-midnight-soft:   #0E1120;  /* Karten, Header-Blur-Basis, Sekundärflächen */
  --c-anthracite:      #10132A;  /* alternative dunkle Sektionsfläche (ersetzt vormals helle "Elfenbein"-Pausen) */
  --c-surface-alt:           #10132A;  /* bewusst dunkel gehalten — Seite bleibt komplett im Dark-Theme */
  --c-slate:            #8B93B0;  /* Sekundärtext, Trennlinien, ruhige Flächen (kühles Grau-Blau) */
  --c-accent-primary:          #00E68C;  /* Neon-Akzent 1: Smaragd-Neongrün (passend zur Bildvorlage) */
  --c-accent-secondary:    #F2C14E;  /* Neon-Akzent 2: Gold (Übergangs-/Gradient-Ziel, passend zu Logo) */

  /* Abgeleitete Rollen (nur diese im Rest des Codes referenzieren) */
  --bg:                var(--c-midnight);
  --bg-elevated:       var(--c-midnight-soft);
  --bg-alt:          var(--c-anthracite);
  --text-on-dark:      #EAF0FF;   /* kühles Weiß statt warmem Elfenbein */
  --text-on-dark-mut:  var(--c-slate);
  --text-on-ivory:     var(--text-on-dark);
  --text-on-ivory-mut: var(--c-slate);
  --accent:            var(--c-accent-primary);
  --accent-hover:      var(--c-accent-secondary);
  /* Neon-Töne dediziert für Fließ-/Label-Text (AA >= 4.5:1). Da jetzt beide Sektionsflächen
     dunkel sind, reicht ein einziger heller Neon-Ton für beide Kontexte.
     NUR für Text nutzen — Linien/Icons/Hover-Glow bleiben bei --accent (3:1-UI-Regel). */
  --accent-text:          #3DFFB8;   /* Grün, aufgehellt: >11:1 auf Midnight & bg-elevated */
  --accent-text-on-ivory: #3DFFB8;   /* gleicher Ton, da bg-ivory jetzt ebenfalls dunkel ist */
  --line:              rgba(139,147,176,0.22);   /* kühle Grau-Blau-Linien auf dunkel */
  --line-ivory:        rgba(139,147,176,0.20);   /* Linien auf der alternativen dunklen Fläche */
  --line-strong:       rgba(0,230,140,0.55);     /* Neongrüne Linie (Fokus/Hover) */

  /* Netzwerk-Motiv Farben (Canvas liest diese via getComputedStyle) — Grün-Gold-Neon-Netz */
  --motif-line:        rgba(0,230,140,0.18);     /* Kanten: Grün, dezent */
  --motif-node:        rgba(242,193,78,0.9);     /* Knoten: Gold, kräftig */
  --motif-node-glow:   rgba(242,193,78,0.4);

  /* ---------- Typografie (v2: modernere Groteske statt Editorial-Serife) ---------- */
  --ff-serif: 'Space Grotesk', 'Sora', system-ui, -apple-system, sans-serif;
  --ff-sans:  'Inter', 'Manrope', system-ui, -apple-system, sans-serif;

  /* Fluides Type-Scale via clamp() — bespoke, KEINE Tailwind-Defaults.
     Basis 16px, Verhältnis ~1.28 (Major-Third-nah). min/vw/max sauber gestuft. */
  --fs-100: clamp(0.78rem, 0.75rem + 0.15vw, 0.85rem);   /* Labels, Eyebrow, Fußnoten */
  --fs-200: clamp(0.9rem,  0.86rem + 0.2vw,  1.0rem);    /* Kleintext, Nav */
  --fs-300: clamp(1.0rem,  0.95rem + 0.28vw, 1.15rem);   /* Fließtext */
  --fs-400: clamp(1.2rem,  1.1rem + 0.5vw,   1.45rem);   /* Lead / großer Fließtext */
  --fs-500: clamp(1.5rem,  1.3rem + 1vw,     2.1rem);    /* H3 / Sektions-Sublines */
  --fs-600: clamp(2.1rem,  1.7rem + 2vw,     3.4rem);    /* H2 Sektions-Headlines */
  --fs-700: clamp(3.2rem,  2.4rem + 4vw,     6rem);      /* große Display-Headlines */
  --fs-800: clamp(4rem,    2.8rem + 7vw,     9.5rem);    /* Hero-Wortmarke FATIH ÖZKAN */

  --lh-tight: 0.98;    /* Display */
  --lh-snug:  1.15;    /* Headlines */
  --lh-body:  1.62;    /* Fließtext */
  --tracking-eyebrow: 0.26em;
  --tracking-display: -0.01em;

  /* Font-Weights (Fraunces variabel 300–600, Instrument Sans 400–600) */
  --fw-serif-light: 340;
  --fw-serif-reg:   400;
  --fw-serif-semi:  560;
  --fw-sans-reg:    400;
  --fw-sans-med:    500;
  --fw-sans-semi:   600;
  /* Fraunces optical size: für große Headlines opsz hoch */
  --serif-opsz-display: 144;
  --serif-opsz-text:    28;

  /* ---------- Spacing-Skala (8px-Basis, bespoke Namen) ---------- */
  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem;  --sp-8: 2rem;    --sp-10: 2.5rem;
  --sp-12: 3rem;   --sp-16: 4rem;
  --sp-20: 5rem;   --sp-24: 6rem;   --sp-32: 8rem;   --sp-40: 10rem;
  /* Sektions-Vertikalabstand fluid */
  --section-y: clamp(5rem, 3rem + 8vw, 10rem);
  --container:  1180px;   /* max-width Content */
  --container-narrow: 720px;  /* Lesetext-Breite */
  --gutter: clamp(1.25rem, 0.8rem + 2vw, 2.5rem);

  /* ---------- Radien ---------- */
  --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-pill: 999px;

  /* ---------- Schatten / Blur (Glassmorphism-Header) ---------- */
  --shadow-card: 0 20px 50px rgba(0,0,0,0.35);
  --shadow-card-hover: 0 28px 70px rgba(10,18,32,0.55);
  --shadow-accent: 0 18px 50px rgba(0,230,140,0.20);
  --header-blur: 14px;
  --header-bg: rgba(10,18,32,0.72);   /* Midnight mit Alpha für backdrop-filter */

  /* ---------- Easing (bespoke Kurven, NICHT ease-in-out) ---------- */
  --ease-out-soft:  cubic-bezier(0.16, 0.8, 0.24, 1);   /* Reveals */
  --ease-out-expo:  cubic-bezier(0.19, 1, 0.22, 1);     /* Hero, große Bewegungen */
  --ease-in-out-refined: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.25s; --dur-med: 0.5s; --dur-slow: 0.9s; --dur-hero: 1.2s;

  --z-cursor: 300; --z-preloader: 250; --z-header: 100; --z-menu: 90;
  --z-motif-hero: 1; --z-content: 2;
}