/* ============================================================
   BASSYAM VOYAGE EXPRESS — Design Tokens & Variables CSS
   Palette signature : Rouge, Blanc, Anthracite
   ============================================================ */

:root {
  /* --- Couleurs Primaires --- */
  --color-primary:       #E60807;   /* Rouge signature Bassyam */
  --color-primary-light: #FF4D4C;   /* Rouge vif */
  --color-primary-dark:  #B80504;   /* Rouge profond */
  --color-primary-soft:  rgba(230, 8, 7, 0.12);

  /* --- Couleurs Secondaires (accent) --- */
  --color-accent:        #FF4D4C;   /* Rouge vif clair */
  --color-accent-light:  #FFB6B5;   /* Rouge clair */
  --color-accent-dark:   #C21716;   /* Rouge profond */

  /* --- Couleurs Sombre (anthracite) --- */
  --color-dark:          #15151B;   /* Anthracite profond */
  --color-dark-alt:      #1F212B;   /* Variante sombre */
  --color-dark-card:     #0F1015;   /* Fond carte sombre */

  /* --- Neutres --- */
  --color-white:         #FFFFFF;
  --color-off-white:     #F7F6F4;   /* Blanc casse, neutre */
  --color-light-gray:    #EFECE9;
  --color-mid-gray:      #9A9A9A;
  --color-dark-gray:     #3D3D3D;
  --color-text:          #26262C;
  --color-text-light:    #6B7280;
  --color-text-muted:    #8A8F98;

  /* --- Couleurs Semantiques --- */
  --color-success:       #27AE60;
  --color-warning:       #E67E22;
  --color-error:         #E74C3C;
  --color-info:          #2980B9;

  /* --- Degrades --- */
  --gradient-primary:    linear-gradient(135deg, #FF2B2A 0%, #E60807 45%, #B80504 100%);
  --gradient-dark:       linear-gradient(135deg, #1C1E28 0%, #101115 100%);
  --gradient-hero:       linear-gradient(180deg, rgba(21,21,27,0.45) 0%, rgba(15,15,20,0.92) 100%);
  --gradient-accent:     linear-gradient(135deg, #FF5A58 0%, #E60807 50%, #B80504 100%);
  --gradient-red:        linear-gradient(120deg, #E60807 0%, #C21716 45%, #8A0C0B 130%);
  --gradient-overlay:    linear-gradient(to right, rgba(21,21,27,0.94) 30%, transparent 100%);

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

  --font-size-xs:        0.75rem;
  --font-size-sm:        0.875rem;
  --font-size-base:      1rem;
  --font-size-md:        1.125rem;
  --font-size-lg:        1.25rem;
  --font-size-xl:        1.5rem;
  --font-size-2xl:       2rem;
  --font-size-3xl:       2.5rem;
  --font-size-4xl:       3rem;
  --font-size-5xl:       4rem;

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-black:    900;

  --line-height-tight:   1.2;
  --line-height-base:    1.6;
  --line-height-loose:   1.8;

  /* --- 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;

  /* --- Bordures & Rayons --- */
  --radius-sm:   0.375rem;
  --radius-md:   0.75rem;
  --radius-lg:   1.25rem;
  --radius-xl:   2rem;
  --radius-full: 9999px;

  /* --- Ombres --- */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.15);
  --shadow-lg:  0 10px 40px rgba(0,0,0,0.2);
  --shadow-xl:  0 20px 60px rgba(0,0,0,0.25);
  --shadow-gold: 0 8px 32px rgba(230,8,7,0.35);
  --shadow-red:  0 8px 32px rgba(230,8,7,0.35);
  --shadow-card: 0 4px 24px rgba(0,0,0,0.12);

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

  /* --- Conteneur --- */
  --container-max:     1280px;
  --container-wide:    1440px;
  --container-narrow:  900px;
  --container-padding: 1.5rem;

  /* --- Z-index --- */
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-overlay:   300;
  --z-modal:     400;
  --z-toast:     500;

  /* --- Navbar --- */
  --navbar-height: 72px;
}