/* ============================================================
   Design Tokens — Le Palais royal & Académie du Palais royal
   Dark editorial system with brand-colored accents
   ============================================================ */


:root {
  /* ── RGB component triplets ─────────────────────────────── */
  /* Sources uniques en composantes RGB : permettent de composer les
     rgba() (voiles, ombres, glows). Les solides ci-dessous en dérivent.
     THÈME PAR DÉFAUT = CLAIR (étape 4). Le sombre est conservé, inactif,
     sous :root[data-theme="dark"] en bas de ce fichier. */
  --surface-base-rgb:   255, 255, 255;  /* blanc pur, fond de page */
  --surface-raised-rgb: 247, 247, 246;  /* #f7f7f6 cartes */
  --text-primary-rgb:   28, 25, 23;     /* #1c1917 texte principal foncé chaud */
  --white-rgb:          255, 255, 255;
  --shadow-rgb:         0, 0, 0;
  --brand-magenta-rgb:  179, 0, 101;
  --brand-red-rgb:      224, 0, 55;

  /* ── Brand accent colors (used as small touches) ────────── */
  --brand-magenta: rgb(var(--brand-magenta-rgb));  /* #B30065 */
  --brand-red:     rgb(var(--brand-red-rgb));      /* #E00037 */
  --brand-orange:  #e2511d;
  --brand-gold:    #f9b50c;

  /* ── Surfaces (clair par défaut) ────────────────────────── */
  --surface-base:     rgb(var(--surface-base-rgb));    /* blanc, fond de page */
  --surface-raised:   rgb(var(--surface-raised-rgb));  /* #f7f7f6 cartes, panneaux */
  --surface-elevated: #f1f0ee;  /* hover, popovers */
  --surface-overlay:  #e9e6e3;  /* modales */

  /* ── Borders (gris clairs) ──────────────────────────────── */
  --border-subtle:   #e7e5e4;
  --border-default:  #d6d3d1;
  --border-strong:   #a8a29e;

  /* ── Text ───────────────────────────────────────────────── */
  --text-primary:    rgb(var(--text-primary-rgb));  /* #1c1917 foncé chaud, titres & corps */
  --text-secondary:  #57534e;   /* gris foncé moyen */
  --text-tertiary:   #78716c;   /* métadonnées */
  --text-inverse:    #f5f5f4;   /* texte clair sur surface foncée (rare) */

  /* ── Semantic surface/text tokens (clair par défaut) ── */
  --text-on-dark:         rgb(var(--white-rgb));   /* #fff — texte sur photo / accent / scrim (reste blanc) */
  --surface-inverse:      rgb(var(--white-rgb));   /* #fff — chips & cartes (⚠ lot 2 en clair) */
  --surface-black:        rgb(var(--shadow-rgb));  /* #000 — fond média / vidéo (reste noir) */
  --text-on-light:        #1c1917;                 /* texte foncé sur surface claire */
  --surface-light:        #fafaf9;                 /* carte / champ clair (form mécènes) */
  --surface-panel-top:    #f3f1f0;                 /* dégradé panneau décoratif (haut) */
  --surface-panel-bottom: #eae7e4;                 /* dégradé panneau décoratif (bas) */
  --surface-fallback-a:   #efe9ec;                 /* dégradé fallback image (violet très clair) */
  --surface-fallback-b:   #e9eaef;                 /* dégradé fallback image (bleu très clair) */
  --brand-magenta-dark:   #950054;                 /* hover CTA cross-site magenta (accent) */
  --scrim-modal:          rgba(5, 5, 5, .94);      /* voile quasi-noir one-off (recherche/modale) */

  /* ── Variant tokens (Académie default) ──────────────────── */
  --accent-primary:   var(--brand-magenta);
  --accent-secondary: var(--brand-gold);

  /* ── Typography ─────────────────────────────────────────── */
  --font-display: "Brandon Grotesque", sans-serif;
  --font-body: "Brandon Grotesque", sans-serif;

  /* Fluid type scale, generated for 320px → 1600px viewports */
  --fs-display:  clamp(3rem,    1.6rem + 6vw,    6.5rem);   /* hero headlines */
  --fs-h1:       clamp(2.25rem, 1.4rem + 3.6vw,  4rem);
  --fs-h2:       clamp(1.75rem, 1.2rem + 2.4vw,  2.75rem);
  --fs-h3:       clamp(1.375rem, 1rem + 1.6vw,   2rem);
  --fs-h4:       clamp(1.125rem, 1rem + 0.6vw,   1.375rem);
  --fs-body-lg:  1.125rem;
  --fs-body:     1rem;
  --fs-body-sm:  0.9375rem;
  --fs-caption:  0.8125rem;
  --fs-micro:    0.6875rem;

  /* Line heights */
  --lh-tight:    1.05;
  --lh-snug:     1.15;
  --lh-normal:   1.5;
  --lh-relaxed:  1.65;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.06em;
  --tracking-wider:  0.14em;

  /* Weights */
  --fw-light:     330;
  --fw-regular:   390;
  --fw-medium:    420;
  --fw-semibold:  450;
  --fw-bold:      500;

  /* ── Spacing (8px base) ─────────────────────────────────── */
  --space-1:  0.25rem;   /* 4px  */
  --space-2:  0.5rem;    /* 8px  */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.5rem;    /* 24px */
  --space-6:  2rem;      /* 32px */
  --space-7:  3rem;      /* 48px */
  --space-8:  4rem;      /* 64px */
  --space-9:  6rem;      /* 96px */
  --space-10: 8rem;      /* 128px */
  --space-11: 12rem;     /* 192px */

  /* ── Radii ──────────────────────────────────────────────── */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-box:  14px;    /* cartes, conteneurs, champs de formulaire */
  --radius-pill: 9999px;  /* boutons d'action (pilule) */

  /* ── Layout ─────────────────────────────────────────────── */
  --container-narrow: 64ch;
  --container-text:   72ch;
  --container-wide:   1280px;
  --container-full:   1440px;
  --gutter:           clamp(1rem, 3vw, 2.5rem);

  /* ── Motion ─────────────────────────────────────────────── */
  --ease-out-quad:  cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast:  150ms;
  --duration-base:  280ms;
  --duration-slow:  500ms;

  /* ── Shadows (subtle on dark) ───────────────────────────── */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.4);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:  0 16px 48px rgba(0,0,0,0.6);

  /* ── Z-index ────────────────────────────────────────────── */
  --z-base:     1;
  --z-raised:   10;
  --z-sticky:   100;
  --z-overlay:  1000;
  --z-modal:    2000;
}

/* ── Variant: Palais royal (rouge dominant) ──────────────── */
[data-variant="palaisroyal"] {
  --accent-primary:   var(--brand-red);
  --accent-secondary: var(--brand-orange);
}

/* ── Variant: Académie (default, magenta) ────────────────── */
[data-variant="academie"] {
  --accent-primary:   var(--brand-magenta);
  --accent-secondary: var(--brand-gold);
}

/* ════════════════════════════════════════════════════════════
   THÈME SOMBRE — CONSERVÉ MAIS INACTIF (étape 4)
   Le clair est désormais le défaut (dans :root ci-dessus). Ce bloc
   restitue les anciennes valeurs sombres ; il ne s'active QUE si
   <html data-theme="dark"> est posé (aucune bascule branchée pour
   l'instant). Gardé pour référence / éventuel futur mode sombre.
   ════════════════════════════════════════════════════════════ */
:root[data-theme="dark"] {
  --surface-base-rgb:   10, 10, 10;
  --surface-raised-rgb: 20, 20, 20;
  --text-primary-rgb:   245, 245, 244;

  --surface-elevated: #1c1c1c;
  --surface-overlay:  #242424;

  --border-subtle:   #262626;
  --border-default:  #333333;
  --border-strong:   #4a4a4a;

  --text-secondary:  #a8a29e;
  --text-inverse:    #0a0a0a;

  --surface-panel-top:    #1a1a1a;
  --surface-panel-bottom: #0f0f0f;
  --surface-fallback-a:   #2a1a2a;
  --surface-fallback-b:   #1a1a2a;
}