/* ==========================================================================
   REELR · Design-Tokens (Monochrom) · Website-Relaunch reelr.de
   Block 1 = EXAKTE Uebernahme aus second-brain/firma/mediakit/tokens.css
             (CI-Gesetz, Hex-Werte 1:1, keine Umbenennung, keine Rundung)
   Block 2 = Website-Erweiterungen Phase 2 (fluide Typo-Skala, Motion-Aliase,
             Z-Layer) nach DESIGN-CONTRACT-website.md
   Leitsatz: Die Marke ist monochrom. Die Arbeit hat die Farbe.
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------ Farbe
     Dark-first. Es gibt KEINE Buntfarbe im Marken-UI; Farbe kommt
     ausschliesslich aus Footage, Thumbnails und Case-Material. */
  --reelr-bg-deep:   #000000; /* tiefste Ebene: Letterbox, Video-Stage, Cover */
  --reelr-bg:        #0A0A0A; /* Standard-Seitenhintergrund (Kontrast Text 19,0:1) */
  --reelr-surface-1: #121212; /* Karten-Schale, aeussere Bezel-Ebene */
  --reelr-surface-2: #1A1A1A; /* Karten-Kern, innere Bezel-Ebene, Inputs */
  --reelr-border:    #2A2A2A; /* Hairlines, Card-Border (dekorativ, kein Text) */
  --reelr-border-hover: #3D3D3D; /* Border-Aufhellung bei Hover (Prinzip 3) */

  --reelr-text:      #FAFAFA; /* Primaertext · 19,0:1 auf bg · AAA */
  --reelr-text-2:    #A8A8A8; /* Sekundaertext · 8,3:1 auf bg · AAA */
  --reelr-text-3:    #7C7C7C; /* Metatext/Labels · 4,7:1 auf bg · AA (nur auf bg/bg-deep) */

  --reelr-accent:     #FFFFFF; /* "Akzent" = reines Weiss: CTA-Flaeche, Wortmarke */
  --reelr-accent-dim: #D4D4D4; /* gedimmtes Weiss: aktive Icons, Hover-Vorstufe */
  --reelr-on-accent:  #0A0A0A; /* Label auf weisser Flaeche · 19,8:1 · AAA */

  /* Invers-Schema (helle Traeger: Papier, Briefbogen, helle Deck-Seiten) */
  --reelr-paper:      #FAFAFA;
  --reelr-ink:        #0A0A0A; /* 19,0:1 auf paper */
  --reelr-ink-2:      #555555; /* 7,1:1 auf paper */
  --reelr-ink-3:      #6E6E6E; /* 4,9:1 auf paper */
  --reelr-line:       #D9D9D9; /* Hairline auf paper */

  /* --------------------------------------------------------------- Schrift
     Clash Display = Stimme der Marke (Display), Satoshi = Text/UI,
     JetBrains Mono = Timecode, Labels, Daten. Immer selbst hosten. */
  --reelr-font-display: "Clash Display", "Arial Narrow", system-ui, sans-serif;
  --reelr-font-body:    "Satoshi", "Helvetica Neue", system-ui, sans-serif;
  --reelr-font-mono:    "JetBrains Mono", "SF Mono", ui-monospace, monospace;

  /* Groessen-Skala (Ratio ~1.333 ab xl, rem-basiert) */
  --reelr-text-xs:   0.75rem;   /* 12 · Mono-Labels, Timecode */
  --reelr-text-sm:   0.875rem;  /* 14 · UI-Nebentext */
  --reelr-text-base: 1rem;      /* 16 · Fliesstext mobil */
  --reelr-text-lg:   1.125rem;  /* 18 · Fliesstext desktop */
  --reelr-text-xl:   1.5rem;    /* 24 · Lead, Card-Titel */
  --reelr-text-2xl:  2rem;      /* 32 · H3 */
  --reelr-text-3xl:  2.75rem;   /* 44 · H2 */
  --reelr-text-4xl:  3.75rem;   /* 60 · H1 */
  --reelr-text-hero: clamp(3.5rem, 10vw, 8.5rem); /* Hero-Display */

  /* Laufweite */
  --reelr-tracking-display: -0.01em; /* Clash-Headlines: minimal eng */
  --reelr-tracking-wordmark: 0.02em; /* Wortmarke REELR (im SVG eingebacken) */
  --reelr-tracking-label:   0.14em;  /* Mono-Eyebrows/Labels, IMMER Versalien */
  --reelr-tracking-body:    0;       /* Satoshi nie spationieren */

  --reelr-leading-display: 0.98;
  --reelr-leading-body:    1.55;
  --reelr-leading-mono:    1.4;

  /* -------------------------------------------------------------- Abstaende
     4-Punkt-Raster. Grosszuegig: Sektionen atmen (Galerie-Logik). */
  --reelr-space-1:  0.25rem;  /*   4 */
  --reelr-space-2:  0.5rem;   /*   8 */
  --reelr-space-3:  0.75rem;  /*  12 */
  --reelr-space-4:  1rem;     /*  16 */
  --reelr-space-6:  1.5rem;   /*  24 */
  --reelr-space-8:  2rem;     /*  32 */
  --reelr-space-12: 3rem;     /*  48 */
  --reelr-space-16: 4rem;     /*  64 */
  --reelr-space-24: 6rem;     /*  96 */
  --reelr-space-32: 8rem;     /* 128 · Standard-Sektionsabstand desktop */
  --reelr-space-40: 10rem;    /* 160 · Hero-Abstand */

  /* Radius. Double-Bezel: aussen = innen + Inset (konzentrisch). */
  --reelr-radius-sm:   4px;   /* Chips, Inputs */
  --reelr-radius-md:   8px;   /* innere Bezel-Ebene */
  --reelr-radius-lg:   12px;  /* aeussere Bezel-Ebene, Cards */
  --reelr-radius-xl:   20px;  /* grosse Medienflaechen */
  --reelr-radius-pill: 999px; /* Buttons */
  --reelr-bezel-inset: 4px;   /* Abstand Schale -> Kern */

  /* Seitenformate / Medien-Ratios */
  --reelr-ratio-cinema: 2.39 / 1; /* Marken-Letterbox, Case-Stages */
  --reelr-ratio-wide:   16 / 9;
  --reelr-ratio-reel:   9 / 16;
  --reelr-ratio-feed:   4 / 5;
  --reelr-container:    1440px;
  --reelr-gutter:       clamp(1.25rem, 4vw, 4rem);

  /* ----------------------------------------------------------------- Motion
     Nie linear, nie ease-in-out. Masse und Praezision statt Verspieltheit. */
  --reelr-ease-mass: cubic-bezier(0.32, 0.72, 0, 1);  /* Standard: schwer, physisch */
  --reelr-ease-out:  cubic-bezier(0.16, 1, 0.3, 1);   /* Reveals, Enter */
  --reelr-ease-snap: cubic-bezier(0.86, 0, 0.07, 1);  /* Shutter/Cut-Momente */
  --reelr-ease-glide: cubic-bezier(0.1, 0.4, 0.15, 1); /* lange Ausroll-Momente: Hero-Szenen, Blenden-Ausklang (Kit v1.2) */
  --reelr-dur-fast:   180ms;  /* Hover, Fokus */
  --reelr-dur-base:   450ms;  /* UI-Uebergaenge */
  --reelr-dur-slow:   700ms;  /* Karten, Overlays */
  --reelr-dur-reveal: 900ms;  /* Sektions-Reveals, max. Dauer */

  /* ------------------------------------------------------------------ Sonst */
  --reelr-grain-opacity: 0.06;  /* Film-Grain-Overlay, nur auf Markenflaechen */
  --reelr-focus-ring: 0 0 0 2px var(--reelr-bg), 0 0 0 4px var(--reelr-text);
}

/* ==========================================================================
   Website-Erweiterungen · Phase 2 (Tokens & Typografie)
   Quelle: DESIGN-CONTRACT-website.md §2.6 (Motion-Vokabular) + MEDIAKIT §4/§5
   ========================================================================== */

:root {
  /* --------------------------------------------- Fluide Typo-Skala (clamp)
     Interpoliert zwischen 390 px (mobil) und 1440 px (Container-Max).
     Endwerte = Kit-Skala, nichts unterschreitet die Kit-Groessen.
     Fliesstext nie unter 16 px (MEDIAKIT §4). */
  --reelr-fluid-hero:    var(--reelr-text-hero);                 /* 56 -> 136 · Hero nach Contract (Kit-clamp) */
  --reelr-fluid-display: clamp(2.75rem, 2.38rem + 1.52vw, 3.75rem); /* 44 -> 60 · H1/Display */
  --reelr-fluid-h2:      clamp(2rem, 1.72rem + 1.14vw, 2.75rem);    /* 32 -> 44 · H2 */
  --reelr-fluid-h3:      clamp(1.5rem, 1.31rem + 0.76vw, 2rem);     /* 24 -> 32 · H3 */
  --reelr-fluid-body:    clamp(1rem, 0.95rem + 0.19vw, 1.125rem);   /* 16 -> 18 · Fliesstext */
  --reelr-fluid-small:   clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem); /* 14 -> 15 · UI-Nebentext */
  --reelr-fluid-label:   clamp(0.75rem, 0.73rem + 0.1vw, 0.8125rem);  /* 12 -> 13 · Mono-Labels, Timecode */

  /* ------------------------------------- Motion-Kurven (Contract-Vokabular)
     EINE Quelle der Wahrheit (P7, Befund 12): die Kit-Token --reelr-ease-*
     aus Block 1 (exakte Mediakit-Kopie). Die Contract-Namen --ease-reelr-*
     sind reine Aliase darauf; GSAP registriert dieselben Werte als
     CustomEase (reelrMass/reelrOut/reelrSnap/reelrGlide/reelrDrift). */
  --ease-reelr-mass:  var(--reelr-ease-mass);  /* Standard: UI, Hover, Karten */
  --ease-reelr-out:   var(--reelr-ease-out);   /* Reveals, Enter */
  --ease-reelr-snap:  var(--reelr-ease-snap);  /* Shutter, Cut, Letterbox */
  --ease-reelr-glide: var(--reelr-ease-glide); /* lange Ausroll-Momente · Kit-Kurve (v1.2, freigegeben von Robert 2026-07-07) */
  --ease-reelr-drift: cubic-bezier(0.37, 0, 0.63, 1); /* nahtlose Ambient-Loops
     (symmetrische Wendepunkte, ersetzt sine.inOut) · 5. Kurve, autonom
     ergaenzt P7, Robert-Review ausstehend (MEDIAKIT v1.3 §7); nach Freigabe
     wandert der Wert als --reelr-ease-drift in die Kit-tokens.css. */

  /* ----------------------------------------------------------------- Grain */
  --reelr-grain-opacity-scroll: 0.04; /* gedrosselte Stufe beim Scrollen (Contract §2.5) */

  /* --------------------------------------------------------------- Z-Layer
     Systemische Ebenen, keine willkuerlichen z-index-Werte im Code. */
  --z-base:    0;   /* Inhalt */
  --z-stage:   10;  /* Letterbox/Media-Buehne */
  --z-rail:    50;  /* Scroll-Progress-Rail, HUD-Meta-Layer */
  --z-nav:     100; /* Glass-Nav */
  --z-overlay: 200; /* Overlays, Dialoge */
  --z-grain:   300; /* Film-Grain, immer zuoberst, pointer-events: none */
}