/* ========================================================================
   tokens.css — K-Show design tokens
   Source de vérité: PLAN-SITE.md section 5
   Open Props (loaded via index.html) fournit --ease-*, --shadow-*, etc.
   ======================================================================== */

@layer tokens {
  :root {
    color-scheme: dark;

    /* --- Palette -------------------------------------------------------- */
    --bg-black:        #0a0a0a;
    --bg-deep:         #050505;
    --surface:         #161616;
    --surface-2:       #1f1f1f;
    --surface-3:       #2a2a2a;

    --ink:             #f5f5f5;
    --ink-dim:         #9a9a9a;
    --ink-mute:        #6a6a6a;

    --accent-red:      #c8102e;        /* rouge K-Show / drapeau QC */
    --accent-red-hot:  #ff1f3d;
    --accent-red-deep: #8b0a1f;

    --metal:           #4a4a4a;
    --metal-light:     #8a8a8a;

    --live-pulse:      #ff2d2d;        /* LIVE indicator only */
    --qc-blue:         #0a3d8f;        /* drapeau Québec accent rare */

    --border:          color-mix(in oklch, var(--ink) 12%, transparent);
    --border-strong:   color-mix(in oklch, var(--ink) 25%, transparent);

    /* --- Typographie ---------------------------------------------------- */
    --font-display: "Anton", "Bebas Neue", "Oswald", Impact, sans-serif;
    --font-body:    "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", "Roboto Mono", monospace;

    /* Fluid type scale (Utopia-style, 320→1280px, 1.20→1.250) */
    --step--2: clamp(0.6944rem, 0.6539rem + 0.2024vw, 0.8rem);
    --step--1: clamp(0.8333rem, 0.7714rem + 0.3095vw, 1rem);
    --step-0:  clamp(1rem, 0.9091rem + 0.4545vw, 1.25rem);
    --step-1:  clamp(1.2rem, 1.0698rem + 0.6512vw, 1.5625rem);
    --step-2:  clamp(1.44rem, 1.2566rem + 0.9174vw, 1.9531rem);
    --step-3:  clamp(1.728rem, 1.4736rem + 1.272vw, 2.4414rem);
    --step-4:  clamp(2.0736rem, 1.7234rem + 1.7508vw, 3.0518rem);
    --step-5:  clamp(2.4883rem, 2.0103rem + 2.3899vw, 3.8147rem);
    --step-6:  clamp(2.986rem, 2.3402rem + 3.229vw, 4.7684rem);
    --step-7:  clamp(3.5832rem, 2.7202rem + 4.315vw, 5.9605rem);
    --step-8:  clamp(4.2998rem, 3.1545rem + 5.7268vw, 7.4506rem);
    --step-9:  clamp(5.1598rem, 3.6443rem + 7.5774vw, 9.3132rem);

    --tracking-tight: -0.02em;
    --tracking-normal: 0;
    --tracking-wide:   0.04em;
    --tracking-wider:  0.08em;
    --tracking-display: -0.01em;

    --leading-tight: 0.95;
    --leading-snug:  1.15;
    --leading-base:  1.5;
    --leading-loose: 1.75;

    /* --- Espacement ----------------------------------------------------- */
    --space-3xs: clamp(0.25rem, 0.2273rem + 0.1136vw, 0.3125rem);
    --space-2xs: clamp(0.5rem, 0.4545rem + 0.2273vw, 0.625rem);
    --space-xs:  clamp(0.75rem, 0.6818rem + 0.3409vw, 0.9375rem);
    --space-s:   clamp(1rem, 0.9091rem + 0.4545vw, 1.25rem);
    --space-m:   clamp(1.5rem, 1.3636rem + 0.6818vw, 1.875rem);
    --space-l:   clamp(2rem, 1.8182rem + 0.9091vw, 2.5rem);
    --space-xl:  clamp(3rem, 2.7273rem + 1.3636vw, 3.75rem);
    --space-2xl: clamp(4rem, 3.6364rem + 1.8182vw, 5rem);
    --space-3xl: clamp(6rem, 5.4545rem + 2.7273vw, 7.5rem);

    /* --- Layout --------------------------------------------------------- */
    --container-max: 84rem;            /* ~1344px */
    --container-narrow: 56rem;         /* ~896px texte éditorial */
    --gutter: clamp(1rem, 3vw, 2rem);

    /* --- Radii ---------------------------------------------------------- */
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 9999px;

    /* --- Z-index -------------------------------------------------------- */
    --z-base:    0;
    --z-sticky:  10;
    --z-fixed:   30;
    --z-overlay: 50;
    --z-modal:   100;
    --z-toast:   200;
    --z-max:     9999;

    /* --- Motion (override de quelques Open Props si manquants) --------- */
    --motion-fast:    180ms;
    --motion-base:    320ms;
    --motion-slow:    560ms;
    --motion-slower:  880ms;

    /* --- Surfaces sémantiques ------------------------------------------ */
    --bg-page:    var(--bg-black);
    --bg-nav:     color-mix(in oklch, var(--bg-black) 80%, transparent);
    --bg-card:    var(--surface);
    --bg-card-hover: var(--surface-2);

    --text-base:  var(--ink);
    --text-muted: var(--ink-dim);
    --text-faint: var(--ink-mute);
    --text-link:  var(--accent-red-hot);

    --shadow-card:  0 8px 24px -8px rgb(0 0 0 / 0.6);
    --shadow-pop:   0 16px 48px -12px rgb(0 0 0 / 0.7);
  }
}