/* ==========================================================================
   Design Tokens — Kar'Amazonie Location
   Charte graphique : couleurs, typographies, espacements, ombres, transitions
   ========================================================================== */

:root {
  /* --- Couleurs principales --- */
  --kar-noir: #0D0D0D;
  --kar-rouge: #D42027;
  --kar-rouge-fonce: #B91C22;
  --kar-blanc: #FFFFFF;
  --kar-creme: #FAF8F5;
  --kar-gris-clair: #F5F3F0;
  --kar-vert: #2D8C4E;

  /* --- Couleurs dérivées --- */
  --kar-rouge-hover: #B91C22;
  --kar-noir-80: rgba(13, 13, 13, 0.8);
  --kar-noir-60: rgba(13, 13, 13, 0.6);
  --kar-noir-40: rgba(13, 13, 13, 0.4);
  --kar-noir-10: rgba(13, 13, 13, 0.1);
  --kar-rouge-10: rgba(212, 32, 39, 0.1);
  --kar-rouge-20: rgba(212, 32, 39, 0.2);

  /* --- Typographies --- */
  --kar-font-titres: 'Bebas Neue', 'Impact', sans-serif;
  --kar-font-corps: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* --- Tailles de police (fluid typography) --- */
  --kar-text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --kar-text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --kar-text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --kar-text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.25rem);
  --kar-text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --kar-text-2xl: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
  --kar-text-3xl: clamp(2rem, 1.5rem + 2.5vw, 3rem);
  --kar-text-4xl: clamp(2.5rem, 1.8rem + 3.5vw, 4rem);
  --kar-text-hero: clamp(3rem, 2rem + 5vw, 5.5rem);

  /* --- Poids de police --- */
  --kar-font-light: 300;
  --kar-font-regular: 400;
  --kar-font-medium: 500;
  --kar-font-semibold: 600;
  --kar-font-bold: 700;

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

  /* --- Layout --- */
  --kar-container-max: 1200px;
  --kar-container-padding: var(--kar-space-6);

  /* --- Bordures --- */
  --kar-radius-sm: 4px;
  --kar-radius-md: 8px;
  --kar-radius-lg: 12px;
  --kar-radius-xl: 16px;
  --kar-radius-full: 9999px;

  /* --- Ombres --- */
  --kar-shadow-sm: 0 1px 2px rgba(13, 13, 13, 0.06);
  --kar-shadow-md: 0 4px 12px rgba(13, 13, 13, 0.08);
  --kar-shadow-lg: 0 8px 24px rgba(13, 13, 13, 0.12);
  --kar-shadow-xl: 0 16px 48px rgba(13, 13, 13, 0.16);

  /* --- Transitions --- */
  --kar-transition-fast: 150ms ease;
  --kar-transition-base: 250ms ease;
  --kar-transition-slow: 400ms ease;

  /* --- Z-index --- */
  --kar-z-header: 100;
  --kar-z-modal: 200;
  --kar-z-whatsapp: 300;
  --kar-z-chatbot: 310;
  --kar-z-toast: 400;
}