/* ============================================================
   MOBILIS TOURS & LOISIRS — Design Tokens & Variables CSS
   Inspiré du logo : Jaune doré, Noir, Blanc
   ============================================================ */

:root {
  /* --- Couleurs Primaires (du logo) --- */
  --color-primary:       #E8A020;   /* Jaune doré chaud */
  --color-primary-light: #F5C15A;   /* Jaune clair */
  --color-primary-dark:  #C07A00;   /* Doré foncé */
  --color-primary-soft:  rgba(232, 160, 32, 0.12); /* Fond léger */

  /* --- Couleurs Secondaires --- */
  --color-dark:          #1A1A2E;   /* Bleu nuit profond */
  --color-dark-alt:      #16213E;   /* Variante sombre */
  --color-dark-card:     #0F1B35;   /* Fond carte sombre */

  /* --- Neutres --- */
  --color-white:         #FFFFFF;
  --color-off-white:     #F8F5F0;   /* Blanc chaud */
  --color-light-gray:    #F2F2F2;
  --color-mid-gray:      #9A9A9A;
  --color-dark-gray:     #3D3D3D;
  --color-text:          #2C2C2C;
  --color-text-light:    #6B7280;

  /* --- Couleurs Sémantiques --- */
  --color-success:       #27AE60;
  --color-warning:       #F39C12;
  --color-error:         #E74C3C;
  --color-info:          #2980B9;

  /* --- Dégradés --- */
  --gradient-primary:    linear-gradient(135deg, #E8A020 0%, #C07A00 100%);
  --gradient-dark:       linear-gradient(135deg, #1A1A2E 0%, #0F1B35 100%);
  --gradient-hero:       linear-gradient(180deg, rgba(26,26,46,0.5) 0%, rgba(15,27,53,0.85) 100%);
  --gradient-gold:       linear-gradient(135deg, #F5C15A 0%, #E8A020 50%, #C07A00 100%);
  --gradient-overlay:    linear-gradient(to right, rgba(26,26,46,0.92) 40%, transparent 100%);

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

  --font-size-xs:        0.75rem;    /* 12px */
  --font-size-sm:        0.875rem;   /* 14px */
  --font-size-base:      1rem;       /* 16px */
  --font-size-md:        1.125rem;   /* 18px */
  --font-size-lg:        1.25rem;    /* 20px */
  --font-size-xl:        1.5rem;     /* 24px */
  --font-size-2xl:       2rem;       /* 32px */
  --font-size-3xl:       2.5rem;     /* 40px */
  --font-size-4xl:       3rem;       /* 48px */
  --font-size-5xl:       4rem;       /* 64px */

  --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;   /*  4px */
  --space-sm:    0.5rem;    /*  8px */
  --space-md:    1rem;      /* 16px */
  --space-lg:    1.5rem;    /* 24px */
  --space-xl:    2rem;      /* 32px */
  --space-2xl:   3rem;      /* 48px */
  --space-3xl:   4rem;      /* 64px */
  --space-4xl:   6rem;      /* 96px */
  --space-5xl:   8rem;      /* 128px */

  /* --- Bordures & Rayons --- */
  --radius-sm:   0.375rem;  /*  6px */
  --radius-md:   0.75rem;   /* 12px */
  --radius-lg:   1.25rem;   /* 20px */
  --radius-xl:   2rem;      /* 32px */
  --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(232,160,32,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;
}