/* ============================================================
   BOOTH AI STUDIO — JETONS DE DESIGN (i268)
   ------------------------------------------------------------
   LA source unique des couleurs, polices, rayons, ombres et
   vitesses de tout le projet : site public, espace organisateur,
   admin et cabine. Chargé EN PREMIER, avant lux.css.

   Règle : une page ne contient plus de code couleur (#c9a962…),
   elle utilise un jeton (var(--gold-soft)). Changer une valeur
   ici la change partout.

   1. Jetons (noms anglais) — les valeurs.
   2. Alias historiques (--or, --noir, --ivoire…) — les noms que
      le code existant utilise déjà ; ils pointent vers les jetons.
   3. Variantes de contexte : lux2.css (site public) et
      lux-admin.css (espaces connectés) ne font que CHOISIR des
      jetons d'ici, ils ne contiennent plus de valeurs.

   Les composants partagés (boutons, chips, badges, rubans,
   cartes…) sont dans components.css, chargé juste après.
   Catalogue vivant : /admin/styleguide.php

   Pour un fond semi-transparent : rgba(var(--gold-rgb), .3).
   ============================================================ */

:root {
  /* ── 1. Couleurs ─────────────────────────────────────────── */

  /* Or — l'or officiel de la marque, puis ses nuances en usage.
     NB : --gold-soft (#c9a962) est l'ancien or « champagne » encore
     présent sur ~40 pages ; l'aligner sur --gold se fera ici, en
     une ligne, une fois validé visuellement. */
  --gold:        #D4AF37;   --gold-rgb: 212, 175, 55;
  --gold-light:  #F2C94C;   --gold-light-rgb: 242, 201, 76;
  --gold-dark:   #8a7136;
  --gold-dark-2: #8a6f36;   /* site public */
  --gold-soft:   #c9a962;   --gold-soft-rgb: 201, 169, 98;
  --gold-pale:   #e6cf9a;
  --gold-warm:   #e6c07a;   --gold-warm-rgb: 230, 192, 122;
  --gold-sand:   #d9b877;   --gold-sand-rgb: 217, 184, 119;

  /* Noirs et fonds */
  --black:       #0b0a08;   --black-rgb: 11, 10, 8;
  --black-2:     #12100c;
  --black-warm:  #0a0806;   --black-warm-rgb: 10, 8, 6;   /* site public */
  --black-warm-2:#120e0a;
  --black-brown: #17110a;   /* texte posé sur un bouton or */
  --surface-1:   #12100c;   /* carte (espaces connectés)     */
  --surface-2:   #17140e;   /* carte survolée                */
  --surface-3:   #0e0d0a;   /* champ, creux                  */
  --surface-site:   #15100b;  /* carte (site public)         */
  --surface-site-2: #1b150e;

  /* Ivoires (texte) */
  --ivory:       #f5ebdd;   --ivory-rgb: 245, 235, 221;
  --ivory-2:     #cfc8b8;   /* texte secondaire               */
  --ivory-2-site:#c9c1b1;   /* texte secondaire (site public) */
  --cream:       #f3eee3;   --cream-rgb: 243, 238, 227;

  /* Filets (bordures fines) */
  --line:        rgba(201, 169, 98, .28);
  --line-soft:   rgba(243, 238, 227, .10);
  --line-site:   rgba(217, 184, 119, .30);
  --line-soft-site: rgba(245, 240, 230, .09);

  /* États */
  --success:       #7fb08d;
  --success-light: #8fd6ad;
  --danger:        #e6817f;
  /* Pastilles d'état (texte clair sur fond teinté — kit de l'admin) */
  --status-on:     #9fe8c0;   --status-on-rgb: 126, 240, 178;   /* en ligne, actif   */
  --status-info:   #8fdcea;   --status-info-rgb: 34, 211, 238;  /* terminé, info     */
  --status-off:    #d98c8c;   --status-off-rgb: 220, 90, 90;    /* coupé, erreur     */
  --ribbon-draft:  linear-gradient(90deg, #c2410c, #ea7a1f);    /* ruban « brouillon » */
  --ribbon-live:   linear-gradient(90deg, #15803d, #22a35a);    /* ruban « publié »    */

  /* Palette « Magie » (branding board 2) — accents */
  --pink:   #FF6EC7;   --pink-rgb: 255, 110, 199;
  --purple: #7861FF;   --purple-rgb: 120, 97, 255;
  --aqua:   #39E5E0;   --aqua-rgb: 57, 229, 224;

  /* ── Polices ─────────────────────────────────────────────── */
  --font-serif: "Cormorant Garamond", Georgia, serif;
  --font-sans:  "Inter", system-ui, sans-serif;

  /* Échelle de texte (pour les nouveaux composants — phase 2) */
  --text-2xs: .72rem;
  --text-xs:  .78rem;
  --text-sm:  .88rem;
  --text-md:  1rem;
  --text-lg:  1.15rem;
  --text-xl:  1.5rem;
  --text-2xl: 2rem;
  --text-3xl: clamp(2.2rem, 4.5vw, 3.4rem);

  /* Espacements (pour les nouveaux composants — phase 2) */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

  /* ── Rayons ──────────────────────────────────────────────── */
  --radius-xs:   8px;    /* pastilles, badges            */
  --radius-sm:   10px;   /* champs, petits boutons       */
  --radius-md:   14px;   /* boutons, vignettes           */
  --radius-lg:   18px;   /* cartes (espaces connectés)   */
  --radius-xl:   20px;   /* cartes (site public)         */
  --radius-2xl:  24px;   /* grandes cartes, aperçus      */
  --radius-pill: 999px;  /* chips, filtres, statuts      */

  /* ── Ombres ──────────────────────────────────────────────── */
  --shadow-1:    0 2px 10px rgba(0, 0, 0, .28);
  --shadow-2:    0 14px 34px rgba(0, 0, 0, .45);
  --shadow-3:    0 22px 60px rgba(0, 0, 0, .55);
  --shadow-gold: 0 10px 26px rgba(212, 175, 55, .26);

  /* ── Mouvement ───────────────────────────────────────────── */
  --ease-fast: .22s cubic-bezier(.2, .8, .2, 1);
  --ease-slow: .38s cubic-bezier(.2, .8, .2, 1);

  /* ── Tailles « au doigt » ────────────────────────────────── */
  --tap-size:    52px;
  --tap-size-sm: 44px;

  /* ── 2. Alias historiques (valeurs des espaces connectés) ── */
  --noir: var(--black);       --noir2: var(--black-2);
  --ivoire: var(--ivory);     --ivoire-2: var(--ivory-2);
  --or: var(--gold);          --or-clair: var(--gold-light);   --or-sombre: var(--gold-dark);
  --hair: var(--line);        --hair-soft: var(--line-soft);
  --serif: var(--font-serif); --sans: var(--font-sans);
}