/* =========================================================
   A3LAM YAKOUT — Design tokens
   ========================================================= */
:root {
  /* Couleurs de marque */
  --color-green: #006B45;
  --color-green-dark: #00502F;
  --color-green-light: #E6F2EC;
  --color-red: #C90016;
  --color-red-dark: #A30012;
  --color-red-light: #FCE8EA;
  --color-cream: #F7F3E9;
  --color-cream-dark: #EFE8D8;
  --color-gold: #E9B949;
  --color-gold-light: #F5D27A;
  --color-dark: #171B1E;
  --color-dark-2: #22272B;
  --color-gray: #70777A;
  --color-gray-light: #A3A9AC;
  --color-white: #FFFFFF;

  /* Neutres d'interface */
  --color-bg: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-surface-2: #F4F4F2;
  --color-border: #E4E2DC;
  --color-border-strong: #CFCCC4;
  --color-text: var(--color-dark);
  --color-text-muted: var(--color-gray);
  --color-star: #F2A500;

  /* États */
  --color-success: #0A7D4F;
  --color-success-bg: #E7F5EE;
  --color-warning: #B86E00;
  --color-warning-bg: #FFF4E0;
  --color-info: #1D5FA8;
  --color-info-bg: #E8F0FA;
  --color-danger: var(--color-red);
  --color-danger-bg: var(--color-red-light);

  /* Typographie */
  --font-heading: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --fs-3xl: clamp(1.85rem, 1.3rem + 2vw, 2.6rem);
  --fs-hero: clamp(2.1rem, 1.2rem + 3.6vw, 3.6rem);
  --lh-tight: 1.15;
  --lh-base: 1.6;

  /* Espacements */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --section-y: clamp(2.75rem, 2rem + 3vw, 4.5rem);

  /* Mise en page */
  --container-max: 1320px;      /* largeur maximale du contenu (axe unique du site) */
  --container-narrow: 880px;    /* colonnes de lecture (FAQ) */
  --container-padding: 24px;    /* marge latérale : 24px desktop → 20px tablette → 16px mobile */
  --header-h: 88px;

  /* Rayons */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* Ombres */
  --shadow-xs: 0 1px 2px rgba(23, 27, 30, .06);
  --shadow-sm: 0 4px 14px rgba(23, 27, 30, .06);
  --shadow-md: 0 10px 30px rgba(23, 27, 30, .10);
  --shadow-lg: 0 20px 50px rgba(23, 27, 30, .16);
  --shadow-focus: 0 0 0 3px rgba(201, 0, 22, .25);

  /* Animations */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-fast: .15s;
  --t-base: .25s;
  --t-slow: .45s;

  /* Plans */
  --z-header: 50;
  --z-dropdown: 60;
  --z-drawer: 80;
  --z-modal: 90;
  --z-toast: 100;
}