/* ===========================================================================
   DESIGN TOKENS — source unique, partagée par les 5 pages du stylebook
   Généré depuis les blocs :root des pages (valeurs reprises à l'identique).
   Toute modification de token se fait ICI, plus dans les pages.
   =========================================================================== */
:root {

  /* --- Couleurs --- */
  --color-white: oklch(99.1% 0 0);
  --color-grey-900: oklch(23% 0.000 0);
  --color-grey-800: oklch(29% 0.000 0);
  --color-grey-700: oklch(40% 0.000 0);
  --color-grey-600: oklch(50% 0.000 0);
  --color-grey-500: oklch(64% 0.000 0);
  --color-grey-400: oklch(72% 0.000 0);
  --color-grey-300: oklch(77% 0.000 0);
  --color-grey-200: oklch(83% 0.000 0);
  --color-grey-100: oklch(89% 0.000 0);
  --color-grey-50: oklch(92% 0.000 0);
  --color-marine-blue-800: oklch(25% 0.128 263);
  --color-marine-blue-700: oklch(34% 0.185 264);
  --color-marine-blue-600: oklch(44% 0.245 264);
  --color-marine-blue-500: oklch(50% 0.280 264);
  --color-marine-blue-100: oklch(80% 0.098 272);
  --color-primary: var(--color-marine-blue-500);
  --color-primary-hover: var(--color-marine-blue-600);
  --color-text-default: var(--color-marine-blue-800);
  --color-tertiary: var(--color-grey-700);
  --color-border-default: var(--color-grey-100);
  --color-white-80: oklch(99.1% 0 0 / 80%);
  --color-white-20: oklch(99.1% 0 0 / 20%);
  --color-bg-primary: var(--color-white);
  --color-icon-default: var(--color-marine-blue-500);
  --color-white-40: oklch(99.1% 0 0 / 40%);
  --color-marine-blue-300: oklch(63% 0.196 268);
  --color-sky-blue-200: oklch(84% 0.114 220);
  --color-sky-blue-700: oklch(49% 0.100 232);
  --color-sky-blue-800: oklch(35% 0.069 230);
  --color-green-200: oklch(91% 0.131 171);
  --color-green-500: oklch(88% 0.192 163);
  --color-green-700: oklch(58% 0.124 163);
  --color-green-800: oklch(40% 0.085 165);
  --color-orange-200: oklch(80% 0.122 45);
  --color-orange-600: oklch(56% 0.182 38);
  --color-orange-700: oklch(44% 0.140 39);
  --color-orange-800: oklch(38% 0.118 39);
  --color-red-500: oklch(53% 0.200 26);
  --color-red-600: oklch(43% 0.160 26);
  --color-window-btn-red: oklch(69% 0.196 26);
  --color-window-btn-yellow: oklch(83% 0.161 81);
  --color-window-btn-green: oklch(73% 0.217 145);
  --color-availability-1: oklch(54% 0.126 155);
  --color-availability-2: oklch(68% 0.175 152);
  --color-warning-1: oklch(71% 0.194 42);
  --color-error-1: oklch(60% 0.234 27);
  --color-bg-card: var(--color-white);
  --color-secondary: var(--color-marine-blue-800);
  --color-accent: var(--color-white);
  --color-text-muted: var(--color-grey-700);
  --color-text-oncolor: var(--color-white);
  --color-border-strong: var(--color-grey-300);
  --color-text-pill: var(--color-grey-700);
  --color-text-pill-bg: var(--color-grey-50);
  --color-success: var(--color-green-700);
  --color-success-bg: oklch(95% 0.076 174);
  --color-warning: var(--color-orange-600);
  --color-warning-bg: oklch(89% 0.063 45);
  --color-error: var(--color-red-500);
  --color-error-bg: oklch(93% 0.030 16);
  --color-info: var(--color-sky-blue-700);
  --color-info-bg: oklch(94% 0.030 218);
  --color-focus-ring: var(--color-marine-blue-300);
  --color-icon-badge-bg: oklch(94% 0.03 264 / 0.55);
  --color-marine-blue-350: oklch(61% 0.207 267);
  --color-white-70: oklch(99.1% 0 0 / 70%);
  --color-white-30: oklch(99.1% 0 0 / 30%);
  --color-white-10: oklch(99.1% 0 0 / 10%);
  --color-bg-subtle: var(--color-grey-50);

  /* --- Typographie --- */
  --font-size-xxl: clamp(2.563rem, 2.313rem + 0.8333vw, 3.063rem);
  --font-size-xl: clamp(1.938rem, 1.688rem + 0.8333vw, 2.438rem);
  --font-size-lg: clamp(1.688rem, 1.563rem + 0.4167vw, 1.938rem);
  --font-size-md: clamp(1.313rem, 1.188rem + 0.4167vw, 1.563rem);
  --font-size-reg: clamp(1.125rem, 1.0625rem + 0.2083vw, 1.25rem);
  --font-size-sm: clamp(0.875rem, 0.8125rem + 0.2083vw, 1rem);
  --font-size-xs: 0.813rem;
  --line-size-xxl: clamp(3rem, 2.8rem + 0.8333vw, 3.5rem);
  --line-size-xl: clamp(2.5rem, 2.2rem + 0.8333vw, 3rem);
  --line-size-lg: clamp(2.2rem, 1.9rem + 0.4167vw, 2.5rem);
  --line-size-md: clamp(1.938rem, 1.75rem + 0.4167vw, 2.25rem);
  --line-size-reg: clamp(1.75rem, 1.6rem + 0.2083vw, 2rem);
  --line-size-sm: clamp(1.25rem, 1.1rem + 0.2083vw, 1.5rem);
  --line-size-xs: 1.125rem;

  /* --- Espacements --- */
  --primitive-4xl: 8rem;
  --primitive-3xl: 6rem;
  --primitive-2xl: 4rem;
  --primitive-xl: 3rem;
  --primitive-lg: 2rem;
  --primitive-md: 1.5rem;
  --primitive-ms: 1.25rem;
  --primitive-reg: 1rem;
  --primitive-sm: 0.75rem;
  --primitive-xs: 0.5rem;
  --primitive-xxs: 0.25rem;
  --spacing-inner-card: clamp(0.9rem, 0.5818rem + 1.3576vw, 1.6rem);
  --spacing-stack-lg: 1.5rem;
  --spacing-stack-md: 1.25rem;
  --spacing-stack-ms: 1rem;
  --spacing-stack-sm: 0.5rem;
  --spacing-component-lg: 2rem;
  --spacing-padding-inline: clamp(0.9rem, 0.5818rem + 1.3576vw, 1.6rem);
  --spacing-padding-block: clamp(0.7rem, 0.3818rem + 1.3576vw, 1.4rem);
  --spacing-stack-xs: 0.25rem;
  --spacing-stack-reg: 0.75rem;
  --spacing-component-xs: 0.5rem;
  --spacing-component-sm: 0.75rem;
  --spacing-component-reg: 1rem;
  --spacing-component-md: 1.5rem;
  --spacing-component-xl: 3rem;
  --spacing-btn-padding-block: clamp(0.1rem, 0.471vw + -0.026rem, 0.35rem);
  --spacing-btn-padding-inline: clamp(0.65rem, 0.659vw + 0.473rem, 1rem);
  --spacing-btn-padding-icon: clamp(0.8rem, 0.791vw + 0.588rem, 1.22rem);
  --spacing-btn-padding-icon-only: 0.65rem;
  --spacing-letter-reg: 0.05rem;
  --primitive-xs-minus: 0.35rem;

  /* --- Tailles & bordures --- */
  --border-width-sm: 0.25rem;
  --border-width-xs: 0.125rem;
  --border-width-xxs: 0.078rem;
  --border-radius-card-outer: 0.625rem;
  --border-radius-card-inner: 0.275rem;
  --border-radius-btn-reg: 0.5rem;
  --border-radius-btn-sm: 0.313rem;
  --border-radius-neutral: 0;
  --size-icon-reg: clamp(1.5rem, 0.792vw + 1.287rem, 2rem);
  --size-icon-ms: clamp(1.625rem, 0.248vw + 1.558rem, 1.781rem);
  --size-image-thumbnail-md: clamp(6rem, 3.168vw + 5.149rem, 8rem);
  --size-image-thumbnail-xl: clamp(12rem, 6.337vw + 10.297rem, 16rem);
  --border-radius-pill: 999px;
  --size-avatar-md: clamp(2.5rem, 1.584vw + 2.074rem, 3.5rem);
  --size-avatar-reg: clamp(2rem, 0.792vw + 1.787rem, 2.5rem);
  --size-avatar-sm: clamp(1.5rem, 0.792vw + 1.287rem, 2rem);
  --size-avatar-xs: clamp(1rem, 0.792vw + 0.787rem, 1.5rem);
  --size-dot: 0.5rem;
  --size-btn-icon: clamp(1rem, 0.471vw + 0.874rem, 1.25rem);

  /* --- Ombres --- */
  --shadow-card: 0 1px 2px oklch(7% 0 0 / 5%), 0 4px 12px oklch(7% 0 0 / 4%);
  --shadow-overlay: 0 8px 30px oklch(7% 0 0 / 12%);

  /* --- Layout --- */
  --layout-side-padding: clamp(0.938rem, 3vw, 1.5rem);

  /* --- Ajouts passe M1/M2 : valeurs déjà utilisées dans les pages, centralisées ici.
     Aucune nouvelle intention visuelle — uniquement la fin de la duplication inline. --- */
  --color-grey-75: oklch(94% 0 0);              /* survols subtils, fond des <code> */
  --color-bg-page: oklch(98.4% 0.002 264);      /* fond de page (cf. sidecar neutral-page-bg) */
  --color-bg-code: var(--color-grey-75);        /* fond des extraits de code inline */
  --color-text-subtle: var(--color-grey-600);   /* petit texte secondaire — contraste AA garanti */
  --font-size-2xs: 0.75rem;                     /* 12px — dates, légendes, libellés secondaires */
  --font-size-3xs: 0.6875rem;                   /* 11px — labels de section, sur-titres */
}

/* Surcharges propres à molecules.html (interlignage adapté au contenu de la page).
   Activées par l'attribut data-page="molecules" sur <html>. */
:root[data-page="molecules"] {
  --line-size-md: clamp(1.7rem, 1.5rem + 0.4167vw, 2rem);
  --line-size-sm: clamp(1.3rem, 1.2rem + 0.2083vw, 1.5rem);
  --line-size-xs: 1.25rem;
}