/* ============================================================
   DripBack Design Tokens — WCAG-AA Contrast Layer (W1)
   Responsive Tier (W2) · Type Scale · Spacing · Motion
   ------------------------------------------------------------
   Single source of truth for brand colour pairs + responsive design tokens.
   CONVENTION: every BG x Text pair that the design pairs together
   reaches >= 4.5:1 (AA normal text). UI / large-text pairs reach
   >= 3.0:1. Each token documents its TARGET contrast as a comment.

   Verified by:  scripts/contrast_lint.py  (deterministic, exit 1 on FAIL)
   Brand source: web/assets/styles.css :root (Geist / blue-violet dark)
   Last update:  2026-06-03

   RESPONSIVE ARCHITECTURE (mobile-first, CSS container queries baseline):
   Breakpoints (logical, no media-queries — use clamp() for fluid scaling):
     sm: 390px   (mobile min width)
     md: 768px   (tablet min width)
     lg: 1024px  (desktop min width)
     xl: 1440px  (wide desktop min width)

   Type Scale: fluid between mobile and desktop via clamp(min, vw%, max).
   Spacing: section/block scale with clamp() for responsive margins.
   Motion: easing + duration tokens for consistent animation semantics.

   ============================================================ */

:root {
  /* --- FLUID TYPE SCALE (mobile-first, clamp() scales linearly vp) -------
     Tuned to common heading/body hierarchy observed across dripback.de pages.
     min: mobile viewport (390px), mid: scaling factor (vw%), max: desktop cap.
     All use sans-serif; --fs-* tokens pair with font-family override if needed. */
  --fs-hero:   clamp(32px, 4.4vw, 64px);   /* page hero title, h1 equivalent    */
  --fs-h1:     clamp(26px, 2.8vw, 38px);   /* major heading, KPI display        */
  --fs-h2:     clamp(24px, 2.4vw, 36px);   /* section headline                  */
  --fs-h3:     clamp(22px, 2.0vw, 28px);   /* subsection, card title            */
  --fs-lede:   clamp(15px, 1.2vw, 19px);   /* intro/lead paragraph              */
  --fs-body:   clamp(14px, 1.05vw, 16px);  /* body copy, main text              */
  --fs-small:  13px;                        /* label, button text, fixed         */
  --fs-label:  11px;                        /* eyebrow, metadata, uppercase      */

  /* --- FLUID SPACING (section + block scale) ------
     --space-section: full-bleed section gaps (page rhythm).
     --space-block: card/module inner/outer spacing rhythm.
     Already live in styles.css; documented here for cross-reference. */
  --space-section: clamp(80px, 14vh, 160px);  /* page section gap           */
  --space-block:   clamp(32px, 5vh, 64px);    /* card / module vertical gap */

  /* --- SURFACES (dark, 3 steps) -----------------------------
     Darkest -> lightest. Text tokens below are tuned so that
     ink / ink-2 / ink-3 all clear AA on ALL THREE surfaces. */
  --t-bg:      #0A0A0B;  /* base page background                          */
  --t-raised:  #121214;  /* cards / raised panels  (vs ink   17.18:1 AA)  */
  --t-elev:    #1A1A1D;  /* elevated / overlay      (vs ink   15.95:1 AA) */

  /* --- TEXT / FOREGROUND (on any surface above) -------------
     ratios quoted against the LIGHTEST surface (--t-elev) =
     the worst case; on --t-bg they are even higher. */
  --t-ink:     #F5F5F7;  /* primary text   — on elev 15.95:1  (AA)        */
  --t-ink-2:   #A1A1AA;  /* secondary text — on elev  6.77:1  (AA)        */
  --t-ink-3:   #8A8A92;  /* muted text     — on elev  5.07:1  (AA)        */
  /* NOTE: #52525B (old muted) was 2.56:1 on bg = FAIL; do not reintroduce. */

  /* --- ACCENT (brand blue) ----------------------------------
     --t-accent is the brand hue, safe as ACCENT TEXT / LINK on
     dark surfaces (4.54:1 on bg = AA). For SOLID FILLS that carry
     text on top (buttons), use --t-accent-interactive which is one
     step deeper so white text clears AA.
     --t-accent was nudged #2B6FFF -> #3D7BFF so accent text clears AA on
     the LIGHTEST surface too (#2B6FFF was 4.30:1 on --t-raised = FAIL). */
  --t-accent:             #3D7BFF;  /* link / accent text — worst case on elev 4.53:1 (AA) */
  --t-accent-interactive: #2563EB;  /* button fill — white text  5.17:1 (AA);
                                       fill-on-bg 3.83:1 (AA UI/large)              */
  --t-accent-hover:       #1F5CD9;  /* button hover — white text 5.85:1 (AA)        */
  --t-accent-2:           #5635A8;  /* brand violet — gradient endpoint ONLY.
                                       NOT used as standalone text on bg (2.33:1). */

  /* --- ACCENT DERIVATIVES (color-mix oklch layers) ---
     Interactive states + surface fills derived from --t-accent-interactive base.
     Darken for active/pressed, lighten for disabled/tint, adjust chroma for surfaces. */
  --t-accent-active:      color-mix(in oklch, var(--t-accent-interactive) 80%, #000000 20%);  /* darker for pressed state */
  --t-accent-surface:     color-mix(in oklch, var(--t-accent-interactive) 20%, var(--t-bg) 80%);  /* light fill, bg-compatible */
  --t-accent-border:      color-mix(in oklch, var(--t-accent-interactive) 60%, #000000 40%);  /* medium border tone */
  --t-accent-disabled:    color-mix(in oklch, var(--t-accent-interactive) 50%, var(--t-ink-2) 50%);  /* desaturated */
  --t-accent-tint:        color-mix(in oklch, var(--t-accent) 15%, var(--t-bg) 85%);  /* very light background tint */
  --t-surface-hover:      color-mix(in oklch, var(--t-raised) 85%, var(--t-ink) 15%);  /* hover lift on raised surfaces */
  --t-border-strong:      color-mix(in oklch, var(--t-ink-2) 70%, #000000 30%);  /* strong border divider */
  --t-ink-faint:          color-mix(in oklch, var(--t-ink-3) 60%, var(--t-bg) 40%);  /* very low contrast disabled text */

  /* --- FG-ON-ACCENT (auto black/white by accent luminance) ---
     For the interactive blue accent, WHITE wins (5.17:1 vs black 4.04:1),
     so the canonical fg-on-accent is white. Picked deterministically:
     whichever of #FFF/#000 yields the higher ratio on the fill colour. */
  --t-fg-on-accent:    #FFFFFF;  /* on --t-accent-interactive 5.17:1 (AA)        */
  --t-fg-on-accent-2:  #FFFFFF;  /* on --t-accent-2 (violet)  8.50:1 (AA)        */

  /* --- STATUS (each carries BLACK text per auto-luminance) --- */
  --t-signal:   #FFB020;  /* on bg 10.82:1; black-on-signal 11.48:1 (AA)   */
  --t-emerald:  #22C55E;  /* on bg  8.69:1; black-on-emerald  9.22:1 (AA)  */
  --t-danger:   #EF4444;  /* on bg  5.26:1; white-on-danger   3.76:1 (UI)  */
  --t-fg-on-signal:   #000000;  /* black on signal  11.48:1 (AA)           */
  --t-fg-on-emerald:  #000000;  /* black on emerald  9.22:1 (AA)           */
  --t-fg-on-danger:   #FFFFFF;  /* white on danger   3.76:1 (AA large/UI)  */

  /* --- MOTION: easing + duration (animation semantics) -----
     Easing curves for different interaction patterns.
     Durations referenced from styles.css + observation of motion libraries. */
  --ease-smooth:    cubic-bezier(0.32, 0.72, 0, 1);      /* standard easing              */
  --ease-spring:    cubic-bezier(0.5, 1.25, 0.75, 1.25); /* playful bounce (overshoot)   */
  --ease-cinematic: cubic-bezier(0.65, 0, 0.35, 1);      /* slow-fast (filmmaking curve) */
  --ease-out-expo:  cubic-bezier(0.19, 1, 0.22, 1);      /* exponential exit             */

  --dur-fast:  160ms;    /* quick feedback (toast, tooltip)    */
  --dur-med:   320ms;    /* standard transition (hover, reveal) */
  --dur-slow:  640ms;    /* cinematic entrance (page hero)      */

  /* --- MOTION TIMING (interaction-specific durations) ---
     Granular timing for different UI patterns: tap (immediate),
     pop (playful entrance), morph (shape shifts), fade (opacity). */
  --dur-tap:   150ms;    /* immediate feedback (button tap, click) */
  --dur-pop:   250ms;    /* playful entrance (toast, popover)     */
  --dur-morph: 300ms;    /* shape/layout transition (card expand)  */
  --dur-fade:  400ms;    /* opacity only (fade in/out overlay)    */

  /* --- PARALLAX EASING (scroll-driven depth layers) ---
     Zusätzliche Easing-Kurven für Parallax-Bewegungen mit Tiefenwirkung. */
  --ease-drift:      cubic-bezier(0.16, 1, 0.3, 1);        /* langer, weicher Auslauf für Tiefenebenen */
  --ease-anticipate: cubic-bezier(0.68, -0.4, 0.32, 1.4);  /* leichtes Vorholen + Überschwingen       */

  /* --- PARALLAX DEPTH FACTORS (CSS ↔ JS shared state) ---
     Tiefenfaktoren für Parallax-Layer. Gelesen durch JS mit getComputedStyle(). */
  --px-depth-fg:  1;    /* Vordergrund (schnellste Bewegung)  */
  --px-depth-mid: 0.7;  /* Mittelebene (moderate Bewegung)   */
  --px-depth-bg:  0.4;  /* Hintergrund (langsamste Bewegung) */

  /* --- ACCENT DEPTH & DEPTH LAYERS (Welle 3: Dark-Professional) ---
     Neue Layer für erhabene Elemente, weiche Akzent-Scheine und neutrale Tiefe.
     Alle basierend auf color-mix für konsistente Interpolation. */
  --t-accent-glow:     color-mix(in oklch, var(--t-accent) 8%, var(--t-bg) 92%);   /* weicher Akzentschein für Hero/Sektions-Hintergruende */
  --t-accent-edge:     color-mix(in oklch, var(--t-accent) 40%, #000000 60%);      /* Rahmen/Trennlinie mit Akzentanteil (dunkel) */
  --shadow-accent:     0 8px 24px color-mix(in srgb, var(--t-accent-interactive) 20%, #000000 80%);  /* erhabener Schatten mit Akzentanteil */
  --shadow-depth:      0 12px 40px rgba(0, 0, 0, 0.5);                             /* neutraler Tiefenschatten auf --t-bg */

  /* --- BRIDGE: map legacy styles.css vars onto AA tokens -----
     Existing selectors reference --accent / --ink / --raised etc.
     Re-pointing them here upgrades the whole site (incl. generated
     pages) without touching every rule. styles.css :root still
     defines fallbacks for browsers that load it before tokens.css. */
  --bg:      var(--t-bg);
  --raised:  var(--t-raised);
  --elev:    var(--t-elev);
  --ink:     var(--t-ink);
  --ink-2:   var(--t-ink-2);
  --ink-3:   var(--t-ink-3);
  --accent:  var(--t-accent);
  --accent-2:var(--t-accent-2);
  --signal:  var(--t-signal);
  --emerald: var(--t-emerald);
  --danger:  var(--t-danger);
}