/* ═══════════════════════════════════════════════════════════════════
   DESIGN TOKENS — RestauVert
   Système de variables CSS unifié pour remplacer la fragmentation
   À adopter progressivement en remplacement des couleurs inline + bundle
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* ─── PALETTE BRAND (alias vers theme.css scales) ─── */
  --rv-green-deep:     var(--rv-green-900, #0A2615);
  --rv-green-dark:     var(--rv-green-800, #0F3320);
  --rv-green-primary:  var(--rv-green-600, #1a4e30);
  --rv-green-mid:      var(--rv-green-500, #2D7A52);
  --rv-green-accent:   var(--rv-green-400, #4CAF50);

  --rv-cream:          var(--rv-cream-50,  #fffdf8);
  --rv-cream-soft:     var(--rv-cream-100, #F7FAF8);
  /* --rv-cream-yellow déjà défini dans theme.css */

  /* --rv-gold/700/400 déjà définis dans theme.css : on ne redéclare PAS */
  --rv-gold-deep:      var(--rv-gold-600, #8B6F1F);
  --rv-gold-bright:    var(--rv-gold-200, #fde047);

  /* ─── TEXTE LIGHT MODE (alias) ─── */
  --rv-text-primary:   var(--rv-text-900, #18291E);
  --rv-text-mid:       var(--rv-text-800, #2E4338);
  --rv-text-mute:      var(--rv-text-500, #5A6B62);
  --rv-text-onbrand:   var(--rv-cream-50, #fffdf8);

  /* ─── BACKGROUNDS LIGHT ─── */
  --rv-bg-page:        var(--rv-cream);
  --rv-bg-card:        #ffffff;
  --rv-bg-alt:         var(--rv-cream-soft);

  /* ─── BORDERS / DIVIDERS ─── */
  --rv-border:         #D4E8DB;
  --rv-border-gold:    rgba(212, 168, 67, 0.45);

  /* ─── SHADOWS ─── */
  --rv-shadow-sm: 0 2px 12px rgba(30,96,64,0.06);
  --rv-shadow-md: 0 8px 30px rgba(30,96,64,0.10);
  --rv-shadow-lg: 0 16px 50px rgba(30,96,64,0.12);
  --rv-shadow-xl: 0 24px 60px -16px rgba(26,78,48,0.18);

  /* ─── TYPOGRAPHY ─── */
  --rv-font-serif: 'Fraunces', Georgia, serif;
  --rv-font-sans:  'Inter', system-ui, sans-serif;

  --rv-fs-h1: clamp(2rem, 4.5vw, 3rem);
  --rv-fs-h2: clamp(1.6rem, 3.5vw, 2.4rem);
  --rv-fs-h3: clamp(1.2rem, 2.5vw, 1.6rem);
  --rv-fs-body: 1rem;
  --rv-fs-small: 0.875rem;

  /* ─── SPACING ─── */
  --rv-sp-1: 0.25rem;
  --rv-sp-2: 0.5rem;
  --rv-sp-3: 0.75rem;
  --rv-sp-4: 1rem;
  --rv-sp-5: 1.5rem;
  --rv-sp-6: 2rem;
  --rv-sp-8: 3rem;
  --rv-sp-10: 4rem;

  /* ─── RADIUS ─── */
  --rv-radius-sm: 8px;
  --rv-radius-md: 12px;
  --rv-radius-lg: 18px;
  --rv-radius-full: 999px;

  /* ─── TRANSITIONS ─── */
  --rv-transition: 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─── DARK MODE TOKENS ─── */
:root[data-theme="dark"]{
  --rv-text-primary:   #F5F2EA;
  --rv-text-mid:       #C7D2C9;
  --rv-text-mute:      #A8B5AC;
  --rv-text-onbrand:   #fffdf8;

  --rv-bg-page:        #0A1F14;
  --rv-bg-card:        #0F2A1C;
  --rv-bg-alt:         #143524;

  --rv-border:         rgba(253, 224, 71, 0.18);
  --rv-border-gold:    rgba(253, 224, 71, 0.35);
}

/* ─── HELPER CLASSES ─── */
.rv-bg-page      { background: var(--rv-bg-page); color: var(--rv-text-primary); }
.rv-bg-card      { background: var(--rv-bg-card); color: var(--rv-text-primary); }
.rv-bg-brand     { background: var(--rv-green-primary); color: var(--rv-text-onbrand); }
.rv-bg-brand-deep{ background: var(--rv-green-deep); color: var(--rv-text-onbrand); }

.rv-text-h1      { font-family: var(--rv-font-serif); font-size: var(--rv-fs-h1); line-height: 1.15; font-weight: 700; }
.rv-text-h2      { font-family: var(--rv-font-serif); font-size: var(--rv-fs-h2); line-height: 1.2; font-weight: 700; }
.rv-text-h3      { font-family: var(--rv-font-serif); font-size: var(--rv-fs-h3); line-height: 1.25; font-weight: 600; }
.rv-text-body    { font-family: var(--rv-font-sans); font-size: var(--rv-fs-body); line-height: 1.65; color: var(--rv-text-mid); }
.rv-text-mute    { color: var(--rv-text-mute); }

.rv-btn-primary  {
  display: inline-flex; align-items: center; gap: var(--rv-sp-2);
  padding: var(--rv-sp-3) var(--rv-sp-6);
  background: var(--rv-green-primary);
  color: var(--rv-text-onbrand);
  border-radius: var(--rv-radius-full);
  font-weight: 700; text-decoration: none;
  transition: background var(--rv-transition);
}
.rv-btn-primary:hover { background: var(--rv-green-dark); }

.rv-btn-gold {
  display: inline-flex; align-items: center; gap: var(--rv-sp-2);
  padding: var(--rv-sp-3) var(--rv-sp-6);
  background: linear-gradient(135deg, var(--rv-gold), var(--rv-gold-soft));
  color: var(--rv-green-primary);
  border-radius: var(--rv-radius-full);
  font-weight: 700; text-decoration: none;
}
:root[data-theme="dark"] .rv-btn-gold {
  background: linear-gradient(135deg, var(--rv-gold-bright), var(--rv-gold));
  color: var(--rv-green-deep);
}