/* =============================================================
   REBOOT PLAN — DESIGN TOKENS
   Variables CSS centralisées. Source de vérité visuelle unique.
   Référence : brief technique 03 §5.
   ============================================================= */

:root {
  /* === PALETTE ============================================== */

  /* Fonds */
  --rp-noir:        #0A0A0A;   /* Fond global de toutes les pages */
  --rp-noir-soft:   #1A1A1A;   /* Élévation 1 (cards, encarts) */
  --rp-noir-elev:   #141414;   /* Élévation intermédiaire */

  /* Marque mère */
  --rp-or:          #C9A84C;   /* Or chaud — CTAs, accents, chiffres clés */
  --rp-or-dark:     #8B7332;   /* Or sombre — variante */
  --rp-or-soft:     #F5F1E8;   /* Ivoire chaud — texte sur or */

  /* Couleurs produit (TOUCHES SUBTILES UNIQUEMENT — jamais en aplat) */
  --rp-petrol:        #1B4D5A; /* Bleu pétrole foncé — Formation */
  --rp-petrol-light:  #5A8A99; /* Bleu pétrole clair — accents textes Formation */
  --rp-bordeaux:      #6B1722; /* Bordeaux profond — App */
  --rp-bordeaux-light:#B0414F; /* Bordeaux clair — accents textes App */

  /* Textes */
  --rp-text-main:   #F5F1E8;   /* Ivoire cassé — texte principal sur fond noir */
  --rp-text-mute:   #9A9A8E;   /* Gris chaud — texte secondaire, légendes */
  --rp-text-faint:  #5A5A56;   /* Gris foncé — texte discret, footer, hints */

  /* Bordures et lisérés */
  --rp-border-faint:    rgba(245, 241, 232, 0.08);
  --rp-border-soft:     rgba(245, 241, 232, 0.16);
  --rp-border-or:       rgba(201, 168, 76, 0.32);
  --rp-border-or-strong:rgba(201, 168, 76, 0.64);

  /* === TYPOGRAPHIE ========================================== */

  --rp-font-display:         'Inter', system-ui, -apple-system, sans-serif;
  --rp-font-body:            'Inter', system-ui, -apple-system, sans-serif;
  --rp-font-serif:           Georgia, 'Times New Roman', serif;
  --rp-font-serif-display:   'Cinzel', Georgia, 'Times New Roman', serif;
  --rp-font-mono:            ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Tailles fluides (mobile → desktop) */
  --rp-fs-h1:       clamp(40px, 6vw, 72px);
  --rp-fs-h2:       clamp(28px, 4vw, 44px);
  --rp-fs-h3:       clamp(20px, 2.5vw, 28px);
  --rp-fs-body:     16px;
  --rp-fs-body-lg:  18px;
  --rp-fs-small:    13px;
  --rp-fs-eyebrow:  11px;

  /* Letter-spacing */
  --rp-ls-display:  -0.03em;
  --rp-ls-body:     0;
  --rp-ls-eyebrow:  0.18em;

  /* Weights */
  --rp-fw-display:  800;
  --rp-fw-bold:     700;
  --rp-fw-medium:   500;
  --rp-fw-body:     400;

  /* Line-heights */
  --rp-lh-display:  1.05;
  --rp-lh-tight:    1.2;
  --rp-lh-body:     1.6;
  --rp-lh-loose:    1.75;

  /* === ESPACES ============================================== */

  --rp-space-2xs: 4px;
  --rp-space-xs:  8px;
  --rp-space-sm:  16px;
  --rp-space-md:  32px;
  --rp-space-lg:  64px;
  --rp-space-xl:  128px;
  --rp-space-section: clamp(100px, 14vh, 180px);

  /* === LAYOUT =============================================== */

  --rp-content-width:    1200px;
  --rp-content-narrow:   880px;
  --rp-content-padding:  clamp(20px, 4vw, 48px);
  --rp-radius-xs: 4px;
  --rp-radius-sm: 8px;
  --rp-radius-md: 14px;
  --rp-radius-lg: 24px;

  /* === MOTION =============================================== */

  --rp-ease:           cubic-bezier(0.22, 1, 0.36, 1);
  --rp-ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --rp-duration-fast:  200ms;
  --rp-duration-base:  400ms;
  --rp-duration-slow:  800ms;

  /* === ÉLÉVATION ============================================ */

  --rp-shadow-soft: 0 1px 2px rgba(0,0,0,0.4), 0 4px 24px rgba(0,0,0,0.32);
  --rp-shadow-lift: 0 2px 4px rgba(0,0,0,0.5), 0 16px 48px rgba(0,0,0,0.4);
  --rp-shadow-or:   0 8px 32px rgba(201, 168, 76, 0.18);
}