/* =========================================================
   Design tokens LaboMo
   Palette dérivée de la couleur du logo (#036860).
   Pour changer la teinte de tout le site : modifier --brand.
   ========================================================= */
:root {
  /* --- Couleurs de marque --- */
  --brand: #036860;
  --brand-600: color-mix(in oklch, var(--brand), black 14%);
  --brand-800: color-mix(in oklch, var(--brand), black 26%);
  --brand-900: color-mix(in oklch, var(--brand), black 44%);
  --brand-300: color-mix(in oklch, var(--brand), white 58%);
  --brand-200: color-mix(in oklch, var(--brand), white 76%);
  --brand-100: color-mix(in oklch, var(--brand), white 88%);
  --brand-50:  color-mix(in oklch, var(--brand), white 95%);

  /* --- Neutres (légèrement teintés de vert pour l'harmonie) --- */
  --paper: #fafcfb;
  --surface: #ffffff;
  --ink: #0c1e1c;
  --ink-2: color-mix(in oklch, var(--ink), white 30%);
  --ink-3: color-mix(in oklch, var(--ink), white 38%); /* 38 % : contraste AA sur fond clair */
  --line: color-mix(in oklch, var(--ink), transparent 89%);
  --line-strong: color-mix(in oklch, var(--ink), transparent 80%);

  /* --- Sur fond sombre --- */
  --on-dark: #f2f8f7;
  --on-dark-2: color-mix(in oklch, var(--on-dark), transparent 28%);
  --line-dark: color-mix(in oklch, var(--on-dark), transparent 86%);

  /* --- États --- */
  --danger: #b42318;
  --success: var(--brand);

  /* --- Typographie --- */
  --font-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-lg: clamp(1.125rem, 1.05rem + 0.35vw, 1.3rem);
  --fs-xl: clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem);
  --fs-2xl: clamp(2rem, 1.5rem + 2.4vw, 3.4rem);
  --fs-3xl: clamp(2.6rem, 1.7rem + 4.4vw, 5.4rem);

  /* --- Espacements --- */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: clamp(3rem, 2rem + 4vw, 5rem);
  --space-section: clamp(4.5rem, 3rem + 6vw, 8.5rem);

  /* --- Formes --- */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgb(12 30 28 / 0.06), 0 1px 1px rgb(12 30 28 / 0.04);
  --shadow-md: 0 12px 32px -12px rgb(12 30 28 / 0.18), 0 2px 6px rgb(12 30 28 / 0.05);
  --shadow-lg: 0 30px 60px -24px rgb(3 60 55 / 0.35);

  /* --- Mise en page --- */
  --container: 1200px;
  --gutter: clamp(1rem, 0.6rem + 2vw, 2rem);
  --header-h: 72px;

  /* --- Mouvement --- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 160ms;
  --dur: 320ms;
  --dur-slow: 800ms;
}