/* ==========================================================
   WIDE VISION — variables.css
   Tous les design tokens — source unique de vérité
   Inspiré de l'esthétique ReachFlow : dark, épuré, impactant
   ========================================================== */

:root {

  /* ── Palette principale ─────────────────────────────────── */
  --gold:          #C9A84C;
  --gold-light:    #E8C96A;
  --gold-pale:     #F2E4A8;
  --gold-dim:      rgba(201, 168, 76, 0.10);
  --gold-dim-md:   rgba(201, 168, 76, 0.18);
  --gold-dim-hi:   rgba(201, 168, 76, 0.28);
  --gold-border:   rgba(201, 168, 76, 0.18);
  --gold-border-hi:rgba(201, 168, 76, 0.40);
  --gold-glow:     rgba(201, 168, 76, 0.15);
  --gold-shadow:   0 4px 32px rgba(201, 168, 76, 0.16);
  --gold-shadow-hi:0 8px 60px rgba(201, 168, 76, 0.25);

  /* Fonds */
  --bg:            #070709;      /* noir quasi-pur */
  --bg-2:          #0C0C0F;
  --bg-3:          #111116;
  --bg-card:       #12121A;
  --bg-card-2:     #17171F;
  --bg-card-hover: #1C1C26;

  /* Textes */
  --white:         #FFFFFF;
  --offwhite:      #F0EDE8;
  --text-hi:       #D8D4CC;
  --text-mid:      #8C8A85;
  --text-lo:       #50504C;

  /* Accents statut */
  --green:         #22C55E;
  --green-dim:     rgba(34, 197, 94, 0.10);
  --green-border:  rgba(34, 197, 94, 0.28);
  --red:           #EF4444;
  --red-dim:       rgba(239, 68, 68, 0.10);

  /* ── Typographies ───────────────────────────────────────── */
  --f-display: 'Playfair Display', Georgia, serif;
  --f-body:    'Inter', system-ui, -apple-system, sans-serif;
  --f-mono:    'Space Mono', 'Courier New', monospace;

  /* ── Espacements (base 4px) ─────────────────────────────── */
  --sp-1:  0.25rem;   /* 4px  */
  --sp-2:  0.5rem;    /* 8px  */
  --sp-3:  0.75rem;   /* 12px */
  --sp-4:  1rem;      /* 16px */
  --sp-5:  1.25rem;   /* 20px */
  --sp-6:  1.5rem;    /* 24px */
  --sp-8:  2rem;      /* 32px */
  --sp-10: 2.5rem;    /* 40px */
  --sp-12: 3rem;      /* 48px */
  --sp-16: 4rem;      /* 64px */
  --sp-20: 5rem;      /* 80px */
  --sp-24: 6rem;      /* 96px */
  --sp-32: 8rem;      /* 128px */

  /* ── Transitions & easings ──────────────────────────────── */
  --ease:        cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1.000);

  --t-fast:   150ms var(--ease);
  --t-base:   250ms var(--ease);
  --t-slow:   400ms var(--ease);
  --t-slower: 600ms var(--ease);

  /* ── Bordures & coins ───────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* ── Ombres ─────────────────────────────────────────────── */
  --shadow-sm: 0 2px 8px  rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.7);

  /* ── Layout ─────────────────────────────────────────────── */
  --max-w:      1160px;
  --max-w-text: 680px;
  --pad:        clamp(1.25rem, 5vw, 2.5rem);
  --nav-h:      68px;

  /* ── Z-index ────────────────────────────────────────────── */
  --z-base:   1;
  --z-card:   10;
  --z-nav:    100;
  --z-cursor: 900;
  --z-grain:  999;
}