/* ═══════════════════════════════════════════════════════════════
   STILLRIDE — TOKENS
   Source de vérité unique des valeurs de design (couleurs, fontes,
   échelles, espacements). Chargé AVANT global.css dans head.php.
   Ne déclarer ici que des VALEURS : ni composant, ni layout.

   Deux couches :
   1. PRIMITIFS (--sr-*)   valeurs absolues, invariantes, sans thème.
   2. SÉMANTIQUES (rôles)  pointent vers les primitifs, basculent par thème.

   Thème sombre par défaut (site). Thème clair via [data-theme="light"]
   sur la racine du document, réservé aux livrables contractuels.
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Jost:wght@200;300;400;500;700&family=Meow+Script&display=swap');

:root {

  /* ─── 1. PRIMITIFS ───────────────────────────────────────────── */

  /* Sombre (site) */
  --sr-black:         #080808;
  --sr-black-card:    #111111;
  --sr-black-soft:    #161616;
  --sr-cream:         #e8e2d9;
  --sr-cream-rgb:     232,226,217;
  --sr-graphite:      #4a4744;

  /* Marque (invariants quel que soit le thème) */
  --sr-red:           #9B2020;
  --sr-red-rgb:       155,32,32;
  --sr-red-bright:    #b52828;
  --sr-gold:          #c8a969;
  --sr-gold-rgb:      200,169,105;

  /* Clair (documents contractuels)
     Valeurs proposées, à valider visuellement, en particulier l'or :
     l'or vif #c8a969 n'a pas un contraste suffisant sur blanc pour du
     texte, --sr-gold-deep est une version assombrie pour cet usage. */
  --sr-paper:         #ffffff;
  --sr-paper-soft:    #f4f1ec;
  --sr-paper-card:    #efe9df;
  --sr-ink:           #1c1916;
  --sr-ink-rgb:       28,25,22;
  --sr-gold-deep:     #9a7d3c;
  --sr-gold-deep-rgb: 154,125,60;

  /* ─── 2. SÉMANTIQUES (rôles, thème sombre) ───────────────────── */

  /* Surfaces */
  --bg:            var(--sr-black);
  --bg-card:       var(--sr-black-card);
  --bg-soft:       var(--sr-black-soft);

  /* Texte (les opacités dérivent de --fg-rgb, donc suivent le thème) */
  --fg:            var(--sr-cream);
  --fg-rgb:        var(--sr-cream-rgb);
  --fg-82:         rgba(var(--fg-rgb),0.82);   /* corps principal */
  --fg-muted:      rgba(var(--fg-rgb),0.55);   /* secondaire */
  --fg-dim:        var(--sr-graphite);         /* labels UI */
  --fg-28:         rgba(var(--fg-rgb),0.28);   /* ghost, footer */

  /* Accents */
  --accent:        var(--sr-red);
  --accent-rgb:    var(--sr-red-rgb);
  --accent-bright: var(--sr-red-bright);
  --accent-dim:    rgba(var(--accent-rgb),0.38);
  --accent-soft:   rgba(var(--accent-rgb),0.12);
  --line:          rgba(var(--accent-rgb),0.22);
  --gold:          var(--sr-gold);
  --gold-rgb:      var(--sr-gold-rgb);
  --gold-soft:     rgba(var(--gold-rgb),0.5);

  /* Aliases rétrocompat */
  --black:         var(--bg);
  --black-card:    var(--bg-card);
  --white:         var(--fg);
  --red:           var(--accent);
  --red-bright:    var(--accent-bright);
  --silver:        var(--fg-82);
  --silver-soft:   var(--fg-dim);

  /* ─── 3. TOKENS INVARIANTS (sans thème) ──────────────────────── */

  /* Typographie */
  --font-body:     'Cormorant Garamond', Georgia, serif;
  --font-ui:       'Jost', sans-serif;
  --font-display:  'Cormorant Garamond', Georgia, serif;
  --font-script:   'Meow Script', cursive;

  /* Échelle typo sémantique */
  --h1-size:       clamp(2.4rem, 6vw, 5rem);
  --h2-size:       clamp(1.8rem, 4vw, 3.2rem);
  --h3-size:       clamp(1.3rem, 2.5vw, 2rem);
  --body-size:     clamp(1.05rem, 1.5vw, 1.2rem);
  --label-size:    0.68rem;
  --label-sm:      0.6rem;
  --label-xs:      0.52rem;

  /* Letter-spacing */
  --track-tight:   0.02em;
  --track-body:    0.01em;
  --track-label:   0.25em;
  --track-eyebrow: 0.38em;
  --track-wide:    0.42em;

  /* Poids */
  --w-body:        300;
  --w-label:       400;
  --w-strong:      500;

  /* Line heights */
  --lh-display:    1.2;
  --lh-body:       1.75;
  --lh-ui:         1.5;

  /* Bordures (border-hair suit le thème via --fg-rgb) */
  --border:        1px solid var(--line);
  --border-hair:   1px solid rgba(var(--fg-rgb),0.13);

  /* Espacements */
  --sp-xs:         0.5rem;
  --sp-sm:         1rem;
  --sp-md:         2rem;
  --sp-lg:         4rem;
  --sp-xl:         8rem;

  /* Dimensions */
  --max-w:         1200px;
  --header-h:      68px;

  /* Transitions */
  --ease:          cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur:           0.35s;
  --dur-slow:      0.7s;
}

/* ═══════════════════════════════════════════════════════════════
   THÈME CLAIR — documents contractuels (fond blanc)
   Active sur <html data-theme="light"> ou un conteneur racine.
   Ne redéfinit QUE les rôles qui changent. Le rouge accent est
   conservé (il passe sur blanc), l'or bascule vers sa version
   assombrie pour rester lisible. Les opacités de texte et la
   hairline se recalculent seules via --fg-rgb.
   ═══════════════════════════════════════════════════════════════ */

[data-theme="light"] {
  --bg:        var(--sr-paper);
  --bg-card:   var(--sr-paper-card);
  --bg-soft:   var(--sr-paper-soft);

  --fg:        var(--sr-ink);
  --fg-rgb:    var(--sr-ink-rgb);
  --fg-dim:    rgba(var(--sr-ink-rgb),0.45);

  --gold:      var(--sr-gold-deep);
  --gold-rgb:  var(--sr-gold-deep-rgb);
}