/* ============================================
   VTL AUTO PRO — Design System Tokens
   Palette: Noir / Or / Argent — Premium
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Outfit:wght@400;500;600;700;800;900&display=swap');

:root {
  /* ── Couleurs principales ── */
  --primary:              #0A0A0A;
  --primary-light:        #1A1A1A;
  --primary-medium:       #111111;
  --primary-dark:         #050505;

  /* ── Or (accent principal) ── */
  --gold:                 #D4A826;
  --gold-light:           #F0C040;
  --gold-lighter:         #F5D060;
  --gold-dark:            #B8901E;
  --gold-gradient:        linear-gradient(135deg, #F0C040 0%, #D4A826 50%, #B8901E 100%);

  /* ── Argent ── */
  --silver:               #C0C0C0;
  --silver-light:         #E0E0E0;
  --silver-lighter:       #F0F0F0;
  --silver-dark:          #999999;
  --silver-gradient:      linear-gradient(135deg, #E8E8E8 0%, #C0C0C0 50%, #A0A0A0 100%);

  /* ── Accent bleu (phares du logo) ── */
  --accent-blue:          #4DA6FF;
  --accent-blue-dark:     #2B8CE6;

  /* ── Couleurs sémantiques ── */
  --success:              #22C55E;
  --success-dark:         #16A34A;
  --warning:              #F0C040;
  --danger:               #EF4444;

  /* ── Surfaces ── */
  --background:           #0A0A0A;
  --background-alt:       #111111;
  --background-card:      #151515;
  --background-elevated:  #1A1A1A;
  --surface:              #1E1E1E;
  --surface-hover:        #252525;
  --surface-light:        #F8F8F8;

  /* ── Textes ── */
  --text-primary:         #FFFFFF;
  --text-secondary:       #B0B0B0;
  --text-muted:           #777777;
  --text-gold:            #D4A826;
  --text-dark:            #0A0A0A;

  /* ── Bordures ── */
  --border-dark:          #2A2A2A;
  --border-medium:        #333333;
  --border-gold:          #D4A826;
  --border-gold-subtle:   rgba(212, 168, 38, 0.3);

  /* ── Typographie ── */
  --font-heading:         'Outfit', sans-serif;
  --font-body:            'Inter', sans-serif;

  --fs-xs:    0.75rem;
  --fs-sm:    0.875rem;
  --fs-base:  1rem;
  --fs-lg:    1.125rem;
  --fs-xl:    1.25rem;
  --fs-2xl:   1.5rem;
  --fs-3xl:   1.875rem;
  --fs-4xl:   2.25rem;
  --fs-5xl:   3rem;
  --fs-6xl:   3.75rem;

  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;
  --fw-black:     900;

  --lh-tight:    1.2;
  --lh-normal:   1.5;
  --lh-relaxed:  1.7;

  /* ── Espacements ── */
  --space-xs:   0.25rem;
  --space-sm:   0.5rem;
  --space-md:   1rem;
  --space-lg:   1.5rem;
  --space-xl:   2rem;
  --space-2xl:  3rem;
  --space-3xl:  4rem;
  --space-4xl:  6rem;
  --space-5xl:  8rem;

  /* ── Border Radius ── */
  --radius-sm:    0.375rem;
  --radius-md:    0.5rem;
  --radius-lg:    0.75rem;
  --radius-xl:    1rem;
  --radius-2xl:   1.5rem;
  --radius-full:  9999px;

  /* ── Ombres ── */
  --shadow-sm:     0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md:     0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg:     0 10px 25px rgba(0, 0, 0, 0.5);
  --shadow-xl:     0 20px 40px rgba(0, 0, 0, 0.6);
  --shadow-gold:   0 4px 20px rgba(212, 168, 38, 0.3);
  --shadow-gold-lg: 0 8px 32px rgba(212, 168, 38, 0.25);
  --shadow-card:   0 2px 12px rgba(0, 0, 0, 0.5);

  /* ── Transitions ── */
  --transition-fast:   150ms ease;
  --transition-normal: 300ms ease;
  --transition-slow:   500ms ease;
  --transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Conteneur ── */
  --container-xl:   1280px;
  --container-max:  1400px;

  /* ── Z-index ── */
  --z-dropdown:  1000;
  --z-sticky:    1020;
  --z-fixed:     1030;
  --z-modal:     1040;
  --z-tooltip:   1050;
}