/* ==========================================================================
   TELI KEUR MASSAR — Variables CSS
   Kit : Dynamique / Commercial — Variante B (Orange Conversion)
   ========================================================================== */

:root {
  /* Couleurs principales */
  --color-primary: #F2762E;       /* Orange vif — CTA, accents */
  --color-primary-dark: #D9631E;
  --color-primary-light: #FBEAE0;
  --color-secondary: #1B2A4A;     /* Bleu marine — header, footer, textes forts */
  --color-secondary-light: #2C3E63;

  --color-bg: #FAF9F6;            /* Blanc cassé — fond général */
  --color-bg-alt: #FFFFFF;
  --color-bg-dark: #1B2A4A;

  --color-text: #1E2430;
  --color-text-muted: #5C6472;
  --color-text-inverse: #FFFFFF;

  --color-success: #1F8A45;
  --color-danger: #D7263D;
  --color-warning: #F4B400;

  --color-border: #E7E3DC;
  --color-border-strong: #D8D2C6;

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

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;
  --fs-3xl: 3rem;

  /* Espacements */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;

  /* Radius & ombres (Kit Dynamique/Commercial : radius moyen, éléments appuyés) */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 8px rgba(27, 42, 74, 0.08);
  --shadow-md: 0 6px 20px rgba(27, 42, 74, 0.12);
  --shadow-lg: 0 12px 32px rgba(27, 42, 74, 0.16);

  /* Layout */
  --container-max: 1200px;
  --header-height: 72px;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
}