/* =============================================================
   Gouvernail Consulting — Design Tokens
   ============================================================= */

:root {
  /* --- Colors (HSL) ----------------------------------------- */
  --navy: 222 49% 21%;          /* #1B2A4E — primary, autorité */
  --navy-soft: 222 40% 28%;
  --electric: 226 100% 59%;     /* #2E5BFF — accent IA / "ai" */
  --electric-soft: 226 100% 75%;
  --compass-red: 350 84% 42%;   /* #C8102E — aiguille sud */
  --mist: 214 32% 97%;          /* #F5F7FA — fonds de section */
  --fog: 215 25% 91%;           /* #E2E8F0 — bordures */
  --slate: 217 19% 35%;         /* #4A5568 — texte courant */
  --ink: 222 47% 11%;           /* #0F172A — texte fort */
  --white: 0 0% 100%;

  /* Semantic */
  --bg: var(--white);
  --fg: var(--ink);
  --muted: var(--slate);
  --border: var(--fog);
  --accent: var(--electric);

  /* --- Typography ------------------------------------------- */
  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --size-xs: 0.75rem;
  --size-sm: 0.875rem;
  --size-base: 1rem;
  --size-lg: 1.125rem;
  --size-xl: 1.25rem;
  --size-2xl: 1.5rem;
  --size-3xl: 1.875rem;
  --size-4xl: 2.25rem;
  --size-display-md: clamp(1.875rem, 2.5vw + 1rem, 2.75rem);
  --size-display-lg: clamp(2.25rem, 4vw + 1rem, 4rem);
  --size-display-xl: clamp(2.75rem, 6vw + 1rem, 5.5rem);

  --tracking-tight: -0.02em;
  --tracking-wide: 0.08em;
  --tracking-widest: 0.18em;

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  /* --- Spacing scale ---------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* --- Layout ----------------------------------------------- */
  --container-max: 1320px;
  --container-narrow: 760px;
  --container-pad: var(--space-5);

  /* --- Radius ----------------------------------------------- */
  --radius-sm: 0.25rem;
  --radius: 0.5rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  /* --- Shadows ---------------------------------------------- */
  --shadow-soft: 0 2px 8px -2px rgba(15, 23, 42, 0.06),
                 0 4px 16px -4px rgba(15, 23, 42, 0.08);
  --shadow-elevated: 0 8px 24px -8px rgba(27, 42, 78, 0.18),
                     0 16px 48px -16px rgba(27, 42, 78, 0.12);

  /* --- Motion ----------------------------------------------- */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --duration-fast: 150ms;
  --duration: 300ms;
  --duration-slow: 600ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration: 0ms;
    --duration-slow: 0ms;
  }
}