/* ==========================================================================
   VARIABLES CSS — REM Digital Solutions
   Charte : Indigo #2B31E8, Noir #0B0B0E, Blanc, Beige #F5F1EA
   ========================================================================== */
:root {
  /* Couleurs marque */
  --color-primary: #2B31E8;
  --color-primary-dark: #1F24B8;
  --color-accent: #7A2BE8;
  --color-gradient: linear-gradient(135deg, var(--color-primary), var(--color-accent));

  --color-black: #0B0B0E;
  --color-white: #FFFFFF;
  --color-beige: #F5F1EA;

  --color-text: #0B0B0E;
  --color-text-muted: rgba(11, 11, 14, 0.72);
  --color-text-faint: rgba(11, 11, 14, 0.55);
  --color-border: rgba(11, 11, 14, 0.1);

  --color-text-inverse: #FFFFFF;
  --color-text-inverse-muted: rgba(255, 255, 255, 0.72);
  --color-border-inverse: rgba(255, 255, 255, 0.15);

  /* Typographie */
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body: 'DM Sans', sans-serif;

  --fs-h1: clamp(2.2rem, 5.5vw, 3.8rem);
  --fs-h2: clamp(1.8rem, 4vw, 2.8rem);
  --fs-h3: clamp(1.4rem, 3vw, 1.8rem);
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-eyebrow: 13px;

  /* Espacements */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 48px;
  --space-xl: 80px;
  --space-2xl: 120px;

  /* Rayons & ombres */
  --radius-sm: 10px;
  --radius-md: 20px;
  --radius-pill: 100px;
  --shadow-soft: 0 20px 50px -20px rgba(11, 11, 14, 0.25);

  /* Layout */
  --container-max: 1200px;
  --container-narrow: 820px;
  --header-height: 84px;

  /* Transitions */
  --transition-fast: 0.25s ease;
  --transition-base: 0.4s ease;
  --transition-slow: 0.8s ease;

  /* Breakpoints (référence — utilisés dans responsive.css) */
  --bp-mobile: 320px;
  --bp-tablet: 768px;
  --bp-desktop: 1024px;
  --bp-wide: 1440px;
}