/* ══════════════════════════════════════════════════════════════
   SOL STUDIO — Design Tokens
   shop/css/tokens.css
   Source unique de vérité pour toutes les couleurs et dimensions
   du shop. Importé en premier par chaque page.
══════════════════════════════════════════════════════════════ */

:root {

  /* ── Fonds gris-bleu ardoise ────────────────────────────────
     Palette froide : le gris-ardoise foncé crée le contraste
     maximal avec l'accent cramoisi chaud.                      */
  --bg:        #121418;   /* Fond principal — quasi-noir froid  */
  --bg2:       #181a22;   /* Nav supérieure & panneaux          */
  --bg3:       #1e2030;   /* Inputs & barre catégories          */
  --bg4:       #252838;   /* Éléments discrets, boutons flat    */
  --bgc:       #181a24;   /* Fond des cartes produit            */
  --bgch:      #1e2130;   /* Fond carte au survol               */
  --rune:      #252840;   /* Fond inputs / cadres formulaires   */

  /* Aliases alpha de --rune (rgba(37,40,64, x)) */
  --rune-10:   rgba(37,40,64,.10);
  --rune-20:   rgba(37,40,64,.20);
  --rune-30:   rgba(37,40,64,.30);  /* Fond input normal        */
  --rune-40:   rgba(37,40,64,.40);  /* Survol nav admin         */
  --rune-80:   rgba(37,40,64,.80);  /* Bordure input            */

  /* ── Cramoisi — accent chaud ───────────────────────────────
     Contraste maximal sur fond gris-ardoise.
     Trois niveaux : clair (acc2), standard (acc), foncé (acc-dk) */
  --acc:       #9b2030;   /* Cramoisi — principal               */
  --acc2:      #c83040;   /* Cramoisi clair — onglets actifs    */
  --acc-dk:    #6b1520;   /* Cramoisi foncé — dégradés boutons  */
  --glow:      rgba(155,32,48,.50);  /* Halo & ombres colorées  */

  /* Aliases alpha de --acc (rgba(155,32,48, x)) */
  --acc-05:    rgba(155,32,48,.05);
  --acc-06:    rgba(155,32,48,.06);
  --acc-08:    rgba(155,32,48,.08);
  --acc-09:    rgba(155,32,48,.09);
  --acc-10:    rgba(155,32,48,.10);
  --acc-12:    rgba(155,32,48,.12);
  --acc-14:    rgba(155,32,48,.14);  /* = --bdr                 */
  --acc-15:    rgba(155,32,48,.15);
  --acc-16:    rgba(155,32,48,.16);
  --acc-18:    rgba(155,32,48,.18);
  --acc-20:    rgba(155,32,48,.20);
  --acc-22:    rgba(155,32,48,.22);
  --acc-28:    rgba(155,32,48,.28);
  --acc-30:    rgba(155,32,48,.30);
  --acc-32:    rgba(155,32,48,.32);
  --acc-35:    rgba(155,32,48,.35);
  --acc-36:    rgba(155,32,48,.36);
  --acc-38:    rgba(155,32,48,.38);  /* = --bdr2                */
  --acc-40:    rgba(155,32,48,.40);
  --acc-50:    rgba(155,32,48,.50);
  --acc-55:    rgba(155,32,48,.55);
  --acc-72:    rgba(155,32,48,.72);  /* = --bdr3                */
  --acc-90:    rgba(155,32,48,.90);  /* Bandes palette catégories */

  /* Aliases alpha de --acc2 (rgba(200,48,64, x)) */
  --acc2-15:   rgba(200,48,64,.15);
  --acc2-18:   rgba(200,48,64,.18);
  --acc2-30:   rgba(200,48,64,.30);
  --acc2-45:   rgba(200,48,64,.45);
  --acc2-50:   rgba(200,48,64,.50);
  --acc2-55:   rgba(200,48,64,.55);

  /* ── Or ────────────────────────────────────────────────────
     Inchangé — chaud sur fond froid = troisième contraste.    */
  --gold:      #c89b3c;
  --gold-dim:  rgba(200,155,60,.08);
  --gold-bg:   rgba(200,155,60,.14);
  --gold-bdr:  rgba(200,155,60,.28);
  --gold-badge: rgba(200,155,60,.92);

  /* ── Texte ──────────────────────────────────────────────────
     Légèrement froid pour s'accorder au fond ardoise.          */
  --text:      #9a9cb0;   /* Corps de texte                     */
  --txt2:      #e8eaf5;   /* Titres & texte fort                */
  --dim:       #505468;   /* Atténué / placeholders             */
  --silver:    #d4d4dd;   /* Neutre — admin, login, checkout    */

  /* ── Bordures ───────────────────────────────────────────────
     Cramoisi sur fond froid — contraste maximal.               */
  --bdr:       rgba(155,32,48,.16);  /* Subtile                 */
  --bdr2:      rgba(155,32,48,.40);  /* Visible                 */
  --bdr3:      rgba(155,32,48,.72);  /* Forte (survol actif)    */

  /* ── États ─────────────────────────────────────────────────*/
  --ok:        #3b9e74;
  --ok-bg:     rgba(59,158,116,.20);
  --ok-bdr:    rgba(59,158,116,.40);
  --ok-solid:  rgba(59,158,116,.92);
  --err:       #e05c5c;
  --err-bg:    rgba(224,92,92,.15);
  --err-solid: #f87171;

  /* ── Badges ─────────────────────────────────────────────────*/
  --badge-promo:   rgba(200,155,60,.92);
  --badge-digital: rgba(59,158,116,.92);
  --badge-order:   rgba(78,73,102,.88);

  /* ── Comic-Action : profil SOL Rouge ───────────────────────
     Adapté du profil "Damnation" pour les couleurs SOL Studio.
     Surface sombre cramoisie, bordure gradient, glow ambiant.  */
  --comic-button-bg:                  #1a0508;
  --comic-button-surface-top:         #2e0c14;
  --comic-button-border-start:        #1a0508;
  --comic-button-border-mid:          #c83040;
  --comic-button-border-end:          #1a0508;
  --comic-button-glow:                rgba(155,32,48,.14);
  --comic-button-hover-surface-top:   #6a1525;
  --comic-button-hover-surface-bottom:#1a0508;
  --comic-button-hover-border-start:  #1a0508;
  --comic-button-hover-border-mid:    #e84060;
  --comic-button-hover-border-end:    #1a0508;
  --comic-button-hover-glow:          rgba(155,32,48,.22);
  --comic-button-text:                #f2f4f8;

  /* ── Dimensions composants ──────────────────────────────────*/
  --card-img-h:  210px;
  --card-foot-h: 160px;
  --nav-h:       42px;
  --nav-h-tw:    64px;

  /* ── Carte produit — typographie ────────────────────────────
     Ajuster ces valeurs pour changer la taille des textes
     sur toutes les cartes de la boutique simultanément.        */
  --card-name-size:      0.76rem;   /* Titre produit (Cinzel)    */
  --card-desc-size:      0.65rem;  /* Description courte        */
  --card-price-size:     0.9rem;  /* Prix & "Gratuit"          */
  --card-price-old-size: 0.76rem;  /* Prix barré (promo)        */
}