/* ============================================================
   Webforging — Design Tokens
   Style 5 (Showcase / WebGL-3D-Cinema) · Marke: digitale Schmiede
   Farbsystem = Metallurgie: Glut-Temperatur-Gradient + getempertes Stahlblau
   auf Obsidian/Forge-Steel. Alle AA-Kontraste in design-decisions.md belegt.
   ============================================================ */

:root {
  /* ===== Farben — Darks (Obsidian / Forge-Steel) ===== */
  --color-bg: #F3F0E7;          /* Rolle: Seitenhintergrund (off-white / bone – Light Page) */
  --color-surface: #FBF9F2;     /* Rolle: Panels/Karten (hell) */
  --color-surface-2: #EFEBE0;   /* Rolle: erhöhte Fläche / Hover-Surface */
  --color-line: rgba(37,50,42,0.12);   /* Rolle: Hairline-Border (oliv-dunkel) */
  --color-line-strong: rgba(37,50,42,0.22); /* Rolle: betonte Kante */

  /* ===== Farben — Heat (Glut-Temperatur-System, NICHT Einzel-Akzent) ===== */
  --color-primary: #FF6A00;     /* Rolle: Marke/CTAs — Blaze-/Neon-Orange (Jagd/Warnorange); dunkler Text drauf (~5.4:1) */
  --color-on-primary: #2A2218;  /* Rolle: dunkler Text auf --color-primary */
  --color-accent: #C2410C;      /* Rolle: Akzent-Text (sattes Orange, AA ~4.6:1 auf off-white; Neon wäre als Text zu kontrastarm) */
  --heat-deep: #C81E0F;         /* Gradient-Stop: niedrige Glut (Tiefrot) */
  --heat-core: #FF5A1E;         /* Gradient-Stop: Molten-Orange (= primary) */
  --heat-amber: #FFB534;        /* Gradient-Stop: Amber */
  --heat-white: #FFE9C2;        /* Gradient-Stop: Weißglut-Spitze (selten) */

  /* ===== Farben — Tempered Steel (authentische kühle Zweitachse, sparsam) ===== */
  --color-green: #4C6B3C;       /* Rolle: oliv/dunkelgrün — Custom-Cursor + grüne Akzente */
  --color-green-deep: #2C3F26;  /* Rolle: tiefes Oliv für Flächen */
  --color-steel: #6E8FAA;       /* Rolle: Restkompatibilität (kaum genutzt) */
  --color-steel-deep: #41607A;  /* Rolle: nur Borders/große Flächen */

  /* ===== Farben — Text ===== */
  --color-text: #2C3F26;        /* Rolle: Fließtext (deep green auf off-white) — ~9.9:1, AAA */
  --color-text-muted: #586357;  /* Rolle: Nebentext (oliv-grau) */

  /* ===== Gradients & Glow (Forge-Atmosphäre) ===== */
  --grad-molten: linear-gradient(135deg, var(--heat-deep) 0%, var(--heat-core) 45%, var(--heat-amber) 80%, var(--heat-white) 100%);
  --grad-ember-veil: radial-gradient(120% 80% at 70% 30%, rgba(255,90,30,0.18), rgba(255,90,30,0) 60%);
  --glow-molten: 0 0 0 1px rgba(255,90,30,0.30), 0 0 40px -6px rgba(255,90,30,0.45);
  --glow-amber: 0 0 32px -8px rgba(255,181,52,0.55);
  --glow-green: 0 0 0 1px rgba(76,107,60,0.45), 0 0 22px -6px rgba(76,107,60,0.50);

  /* ===== Typografie ===== */
  --font-display: "Space Grotesk", system-ui, sans-serif;   /* Headlines — techy/engineering grotesque */
  --font-body: "Manrope", system-ui, sans-serif;            /* Body — clean geometric-humanist */
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace; /* HUD/Labels/Instrumentierung */

  --text-xs: 0.75rem;     /* 12px — Mono-Labels/Eyebrows */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1.0625rem; /* 17px — Body */
  --text-lg: 1.25rem;     /* 20px — Lead */
  --text-xl: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
  --text-2xl: clamp(2rem, 1.5rem + 2.4vw, 3rem);
  --text-3xl: clamp(2.5rem, 1.8rem + 3.4vw, 4rem);
  --text-display: clamp(2.75rem, 1.6rem + 5vw, 5.5rem);  /* große Section-Headlines */
  --text-hero: clamp(3rem, 1.2rem + 7vw, 7rem);          /* Hero — bewusst übergroß (Style 5) */

  --leading-tight: 1.04;  /* Display/Hero */
  --leading-snug: 1.18;   /* große Headlines */
  --leading-body: 1.6;    /* Fließtext */
  --tracking-tight: -0.02em;   /* Clash Display großgesetzt */
  --tracking-normal: 0;
  --tracking-wide: 0.18em;     /* Mono-Eyebrows UPPERCASE */

  /* ===== Spacing (4px Base Grid) ===== */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;  --space-5: 20px;
  --space-6: 24px;  --space-8: 32px;  --space-12: 48px; --space-16: 64px;
  --space-24: 96px; --space-32: 128px;
  --section-padding: clamp(var(--space-16), 9vw, var(--space-32)); /* vertikaler Section-Rhythmus */
  --container-max: 1280px;
  --container-gutter: clamp(var(--space-4), 5vw, var(--space-12));

  /* ===== Radius (Forge = engineered/sharp) ===== */
  --radius-sm: 2px;  --radius-md: 4px;  --radius-lg: 8px;
  --radius-pill: 0;  /* bewusst KEINE Pill-Buttons — kantig/industriell */

  /* ===== Shadow (dunkel-cinematisch: Tiefe + Glow statt Soft-Card) ===== */
  --shadow-sm: 0 2px 8px -2px rgba(37,50,42,0.12);
  --shadow-md: 0 18px 50px -24px rgba(37,50,42,0.22);
  --shadow-lg: 0 40px 100px -30px rgba(37,50,42,0.22);

  /* ===== Z-Index-Skala ===== */
  --z-base: 0; --z-raised: 10; --z-sticky: 40; --z-nav: 100; --z-overlay: 1000; --z-cursor: 9999;

  /* ===== Motion (von /build genutzt; Flagship-Stack Lenis+GSAP+Three.js) ===== */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --ease-forge: cubic-bezier(0.16, 1, 0.3, 1);   /* „Hammerschlag" — schnelles Settle */
  --dur-fast: 150ms; --dur-base: 300ms; --dur-slow: 600ms;
  --dur-cinematic: 1000ms;  /* Style 5: scroll-scrubbed / Pinning / WebGL */
}

/* Reduced Motion: Build setzt zusätzlich JS-Guards (Lenis/GSAP/Three.js nicht init). */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-cinematic: 0ms; }
}