/* ============================================================================
   STUDIO KIT — tokens.css   ·  SOURCE DE VÉRITÉ VISUELLE
   ----------------------------------------------------------------------------
   Light-first. 3 thèmes re-skinnables PAR LES TOKENS, jamais par le markup.
     • Thème A — Atelier Suisse   → :root (défaut)
     • Thème B — Lumière chaude   → [data-theme="warm"]
     • Thème C — Contemp. audacieux → [data-theme="bold"]

   Règle d'or : aucune section n'écrit de valeur en dur. Tout passe par var(--…).
   Changer un token re-colore TOUTES les sections d'un coup.

   Les tokens DÉRIVÉS (accent-soft / tint / faint, focus) sont définis une seule
   fois en :root via color-mix(var(--accent)…) : ils se recalculent tout seuls
   pour chaque thème, puisque --accent / --surface-* sont redéfinis plus bas.
   ============================================================================ */

:root {
  color-scheme: light;

  /* — SURFACES (Thème A · Atelier Suisse) ------------------------------- */
  --surface-page:    #FAFAF7;   /* fond de page */
  --surface-raised:  #FFFFFF;   /* cartes, panneaux surélevés */
  --surface-sunken:  #F0F0EA;   /* bandes en creux, alternance de rythme */
  --surface-invert:  #14161D;   /* bandes sombres PONCTUELLES (footer, scrim) */

  /* — TEXTE -------------------------------------------------------------- */
  --text-strong:        #111319;
  --text-default:       #2A2D36;
  --text-muted:         #585D69;
  --text-dimmed:        #777C88;
  --text-disabled:      #A6AAB4;
  --text-on-invert:        #F3F4F8;
  --text-on-invert-muted:  #A7ABB8;
  --text-on-accent:        #FFFFFF;

  /* — ACCENT (bleu encre) ------------------------------------------------ */
  --accent:        #2F5BEA;
  --accent-strong: #2444BD;   /* variante foncée → texte accent sur clair (AA) */
  --accent-text:   #2444BD;   /* couleur d'accent pour le TEXTE (contraste sûr) */

  /* — BORDURES / FILETS -------------------------------------------------- */
  --border:         color-mix(in srgb, var(--text-strong) 12%, transparent);
  --border-strong:  color-mix(in srgb, var(--text-strong) 22%, transparent);
  --border-invert:  color-mix(in srgb, #ffffff 16%, transparent);

  /* — POLICES (Thème A) -------------------------------------------------- */
  /* Display = Schibsted Grotesk (grotesque suisse confiant, via Google Fonts).
     NB : le WOFF2 "Cabinet Grotesk" fourni était corrompu (texte, pas une
     police) ; Schibsted Grotesk est le choix OFFICIEL d'Atelier Suisse.
     Pour repasser à Cabinet : déposer un vrai WOFF2 + l'activer dans fonts.css. */
  --font-display: "Schibsted Grotesk", "Switzer", system-ui, sans-serif;
  --font-body:    "Switzer", system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono:    "Space Grotesk", ui-monospace, SFMono-Regular, monospace;
  --font-variable: var(--font-display);

  /* ====================================================================== *
   * TOKENS PARTAGÉS (identiques aux 3 thèmes) — échelle, motion, config    *
   * ====================================================================== */

  /* — Dérivés d'accent (se recalculent par thème) — */
  --accent-soft:  color-mix(in srgb, var(--accent) 12%, var(--surface-page));
  --accent-tint:  color-mix(in srgb, var(--accent) 26%, transparent);
  --accent-faint: color-mix(in srgb, var(--accent) 9%,  transparent);

  /* — Focus visible (a11y) — */
  --focus-ring:  var(--accent);
  --focus-width: 2px;

  /* — Échelle typographique fluide — */
  --text-mono:    clamp(0.72rem, 0.69rem + 0.16vw, 0.8rem);
  --text-small:   clamp(0.86rem, 0.83rem + 0.16vw, 0.95rem);
  --text-body:    clamp(1rem, 0.97rem + 0.2vw, 1.0625rem);
  --text-lead:    clamp(1.15rem, 1.04rem + 0.55vw, 1.4rem);
  --text-h5:      clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  --text-h4:      clamp(1.15rem, 1.04rem + 0.5vw, 1.4rem);
  --text-h3:      clamp(1.35rem, 1.14rem + 1vw, 1.85rem);
  --text-h2:      clamp(1.9rem, 1.42rem + 2.3vw, 3rem);
  --text-h1:      clamp(2.5rem, 1.85rem + 3.3vw, 4.25rem);
  --text-display: clamp(3rem, 1.75rem + 5.9vw, 6.5rem);
  --text-quote:   clamp(1.6rem, 1.12rem + 2.4vw, 2.9rem);
  --text-stat:    clamp(2.6rem, 1.85rem + 3.9vw, 4.75rem);

  /* — Interlignes — */
  --leading-body:  1.62;
  --leading-snug:  1.4;
  --leading-tight: 1.06;

  /* — Approche (letter-spacing) — */
  --tracking-tight:   -0.02em;
  --tracking-snug:    -0.01em;
  --tracking-wide:     0.14em;
  --tracking-label:    0.08em;
  --tracking-display: -0.025em;

  /* — Espacement (n = n × 0.25rem) — */
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* — Rythme de section — */
  --section-y:         clamp(4rem, 2.6rem + 6.8vw, 9rem);
  --section-y-compact: clamp(2.75rem, 2rem + 3.6vw, 5rem);

  /* — Conteneurs — */
  --container:    75rem;
  --container-sm: 46rem;
  --gutter:       clamp(1.25rem, 0.6rem + 3vw, 3rem);

  /* — Rayons — */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-pill: 999px;

  /* — Ombres (douces, froides) — */
  --shadow-sm: 0 1px 2px rgba(17,19,25,.05), 0 2px 6px rgba(17,19,25,.04);
  --shadow-md: 0 6px 18px rgba(17,19,25,.08), 0 3px 8px rgba(17,19,25,.05);
  --shadow-lg: 0 26px 64px -24px rgba(17,19,25,.26), 0 10px 26px -16px rgba(17,19,25,.14);

  /* — Motion — */
  --dur-fast:   0.18s;
  --dur-base:   0.36s;
  --dur-slow:   0.7s;
  --dur-reveal: 0.8s;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:   cubic-bezier(0.34, 1.4, 0.5, 1);

  /* — Calques (z-index) — */
  --z-base:    0;
  --z-raised:  1;
  --z-nav:     100;
  --z-overlay: 1000;

  /* — Config composants — */
  --marquee-duration: 38s;
  --reveal-shift:     18px;
  --reveal-step:      90ms;
  --reveal-delay:     0ms;
  --underline-offset: 0.18em;
  --touch-min:        44px;
  --grain-opacity:    0.045;
  --control-icon:     1.25rem;
  --control-icon-lg:  1.75rem;

  /* Galerie immersive / lightbox */
  --gi-btn-size:       2.75rem;
  --gi-cue-size:       2.5rem;
  --gi-lift:           -4px;
  --gi-lightbox-max-h: 82vh;
  --gi-zoom:           1;
  --gi-zoom-in:        1.06;

  /* Cartes en relief (tilt 3D) */
  --tilt-perspective: 900px;
  --tilt-body-z:      38px;
  --tilt-media-z:     60px;
  --tilt-glow-size:   55%;
  --tilt-media-zoom:  1.05;

  /* Sceau rotatif (unités viewBox 200×200) */
  --seal-spin-dur:  26s;
  --seal-text-size: 13px;

  /* États runtime (écrits par kit.js — défauts « au repos ») */
  --stack-progress: 0;
  --hp-scroll: 0px;  --hp-scroll-rev: 0px;
  --pos: 50;  --demo-pos: 50;
  --tilt-x: 0deg;  --tilt-y: 0deg;  --mx: 50%;  --my: 50%;
  --mag-x: 0px;  --mag-y: 0px;
}

/* ========================================================================== *
 * THÈME B — LUMIÈRE CHAUDE  ·  éditorial, luxe doux (spa / hôtel / resto)     *
 * Fraunces + General Sans · accent terracotta · fond crème                   *
 * ========================================================================== */
[data-theme="warm"] {
  --surface-page:    #F6F1E9;
  --surface-raised:  #FCFAF5;
  --surface-sunken:  #EEE6D8;
  --surface-invert:  #241C16;

  --text-strong:        #2A211B;
  --text-default:       #40362D;
  --text-muted:         #6B5F50;
  --text-dimmed:        #8A7E6F;
  --text-disabled:      #B0A593;
  --text-on-invert:        #F4ECE0;
  --text-on-invert-muted:  #BCAE9B;
  --text-on-accent:        #FFF7EF;

  --accent:        #92533A;
  --accent-strong: #6F3D2A;
  --accent-text:   #7A4530;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "General Sans", system-ui, -apple-system, sans-serif;
  --font-mono:    "Space Grotesk", ui-monospace, monospace;
  --font-variable: var(--font-display);

  /* Le serif veut moins de chasse négative que les grotesques. */
  --tracking-display: -0.012em;
  --tracking-tight:   -0.012em;
}

/* ========================================================================== *
 * THÈME C — CONTEMPORAIN AUDACIEUX  ·  punchy, jeune, démos « wow »           *
 * Clash Display + Satoshi + DM Sans · accent émeraude · fond gris perle       *
 * ========================================================================== */
[data-theme="bold"] {
  --surface-page:    #F4F5F3;
  --surface-raised:  #FFFFFF;
  --surface-sunken:  #E8EBE7;
  --surface-invert:  #0E140F;

  --text-strong:        #101512;
  --text-default:       #29302B;
  --text-muted:         #525A53;
  --text-dimmed:        #79817A;
  --text-disabled:      #A7AEA8;
  --text-on-invert:        #EEF3EC;
  --text-on-invert-muted:  #A2AEA3;
  --text-on-accent:        #FFFFFF;

  --accent:        #0C7049;
  --accent-strong: #095738;
  --accent-text:   #0A5E3D;

  /* Clash Display (Fontshare, auto-hébergé via fonts.css) — display large,
     géométrique et punchy, taillé pour les démos « wow ». */
  --font-display: "Clash Display", system-ui, sans-serif;
  --font-body:    "Satoshi", system-ui, -apple-system, sans-serif;
  --font-mono:    "DM Sans", ui-monospace, monospace;
  --font-variable: var(--font-display);

  /* Clash Display est large et géométrique → on serre davantage. */
  --tracking-display: -0.035em;
}

/* ========================================================================== *
 * THÈME D — NUIT  ·  sombre, profond, premium (studio tech / SaaS / luxe noir)*
 * Schibsted/Switzer (comme Atelier Suisse) · accent bleu lumineux · fond encre *
 * ----------------------------------------------------------------------------*
 * Modèle sémantique conservé : --surface-invert devient une bande CLAIRE       *
 * (l'« inverse » de la page) et --text-on-invert redevient sombre. Toutes les  *
 * sections qui utilisent --surface-invert basculent donc en clair-sur-sombre.  *
 * ========================================================================== */
[data-theme="dark"] {
  color-scheme: dark;

  --surface-page:    #0C0E13;   /* encre profonde */
  --surface-raised:  #161A22;   /* cartes / panneaux */
  --surface-sunken:  #08090D;   /* bandes en creux */
  --surface-invert:  #F3F4F8;   /* bande CLAIRE ponctuelle (inverse de la page) */

  --text-strong:        #F5F7FC;
  --text-default:       #D2D7E1;
  --text-muted:         #969CAB;
  --text-dimmed:        #6E7482;
  --text-disabled:      #4B515D;
  --text-on-invert:        #14161D;   /* texte sombre sur la bande claire */
  --text-on-invert-muted:  #585D69;
  --text-on-accent:        #0A0C12;   /* texte sombre sur l'accent lumineux */

  /* Accent bleu lumineux : lisible sur l'encre ET supporte un texte sombre. */
  --accent:        #5E80FF;
  --accent-strong: #7E99FF;   /* hover → plus clair sur fond sombre */
  --accent-text:   #8AA3FF;   /* accent pour le TEXTE (contraste sûr sur encre) */

  /* Sur la bande claire (--surface-invert), un filet doit être SOMBRE. */
  --border-invert: color-mix(in srgb, #0C0E13 16%, transparent);

  /* Ombres : le noir doux des thèmes clairs disparaît sur l'encre → on renforce. */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.4);
  --shadow-md: 0 10px 28px rgba(0,0,0,.55), 0 4px 10px rgba(0,0,0,.4);
  --shadow-lg: 0 32px 72px -24px rgba(0,0,0,.75), 0 12px 30px -16px rgba(0,0,0,.6);

  --font-display: "Schibsted Grotesk", "Switzer", system-ui, sans-serif;
  --font-body:    "Switzer", system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono:    "Space Grotesk", ui-monospace, SFMono-Regular, monospace;
  --font-variable: var(--font-display);
}