/* =========================================================
   VARIABLES — LuxurCars.ch
   Design tokens : couleurs, typo, espacement, ombres
   ========================================================= */

:root {
  /* ── Fonds ─────────────────────────────────────────── */
  --bg-obsidian:  #030304;
  --bg-graphite:  #080809;
  --bg-slate:     #0D0D0F;
  --bg-steel:     #121214;

  /* ── Texte ─────────────────────────────────────────── */
  --text-primary:   #F4F2EE;
  --text-secondary: #B4B0A8;
  --text-muted:     #6B6862;

  /* ── Accent Geneva Red ──────────────────────────────── */
  --accent:        #A62B2B;
  --accent-bright: #D63838;
  --accent-deep:   #7A1F1F;

  /* ── Platine / champagne (VIP) ──────────────────────── */
  --platinum:   #BDB5A2;
  --champagne:  #DED3B8;

  /* ── Bordures / ombres ──────────────────────────────── */
  --border:           rgba(244, 242, 238, 0.08);
  --border-hover:     rgba(244, 242, 238, 0.20);
  --border-accent:    rgba(166, 43, 43, 0.60);
  --shadow-cinematic: 0 30px 80px rgba(0, 0, 0, 0.60);
  --shadow-card:      0 8px 32px rgba(0, 0, 0, 0.40);
  --glow-accent:      0 0 40px rgba(166, 43, 43, 0.25);

  /* ── Typographie ─────────────────────────────────────── */
  --font-display: 'Manrope', 'Unbounded', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-serif:   'DM Serif Display', Georgia, serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* ── Échelle de taille ───────────────────────────────── */
  --fs-display: clamp(3.5rem, 9vw, 8rem);
  --fs-h1:      clamp(2.25rem, 4vw, 3.75rem);
  --fs-h2:      clamp(1.75rem, 3vw, 2.5rem);
  --fs-h3:      clamp(1.25rem, 2vw, 1.75rem);
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-caption: 0.75rem;

  /* ── Hauteurs de ligne ───────────────────────────────── */
  --lh-tight: 0.95;
  --lh-snug:  1.2;
  --lh-body:  1.65;

  /* ── Espacement ──────────────────────────────────────── */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;
  --space-3xl: clamp(6rem, 12vw, 12rem);

  /* ── Container ───────────────────────────────────────── */
  --container-max: 1440px;
  --container-pad: clamp(1.5rem, 4vw, 3rem);

  /* ── Border-radius ───────────────────────────────────── */
  --radius-none: 0;
  --radius-pill: 999px;
  --radius-sm:   2px;

  /* ── Transitions ─────────────────────────────────────── */
  --transition-fast:    150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth:  300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:    600ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring:  400ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Nav ─────────────────────────────────────────────── */
  --nav-height: 120px;
}

/* ── Nav height responsive ───────────────────────────────── */
@media (max-width: 768px) {
  :root { --nav-height: 70px; }
}

/* ── Mode clair (toggle) ─────────────────────────────── */
[data-theme="light"] {
  --bg-obsidian:    #F7F5F0;
  --bg-graphite:    #EFEBE3;
  --bg-slate:       #E5E1D8;
  --bg-steel:       #D8D3C8;
  --text-primary:   #0A0B0D;
  --text-secondary: #3A3832;
  --text-muted:     #7A7670;
  --border:           rgba(10, 11, 13, 0.10);
  --border-hover:     rgba(10, 11, 13, 0.22);
  --shadow-cinematic: 0 30px 80px rgba(0, 0, 0, 0.15);
  --shadow-card:      0 8px 32px rgba(0, 0, 0, 0.10);
}