:root {
  /* ——— Primary (navy) ——— */
  --color-primary: hsl(228, 78%, 18%);
  --color-primary-dark: hsl(229, 81%, 12%);
  --color-primary-100: hsl(201, 80%, 96%);
  --color-primary-200: hsl(203, 82%, 85%);
  --color-primary-300: hsl(213, 64%, 79%);

  /* ——— Secondary (sky) ——— */
  --color-secondary: hsl(203, 83%, 55%);
  --color-secondary-dark: hsl(203, 73%, 46%);
  --color-secondary-100: hsl(201, 80%, 94%);
  --color-secondary-200: hsl(203, 82%, 85%);
  --color-secondary-300: hsl(213, 64%, 79%);

  /* ——— Accent (red) ——— */
  --color-accent: hsl(12, 90%, 47%);
  --color-accent-dark: hsl(12, 90%, 35%);
  --color-accent-light: hsl(11, 92%, 95%);

  /* ——— Success (green) ——— */
  --color-success: hsl(140, 89%, 36%);
  --color-success-dark: hsl(108, 90%, 35%);
  --color-success-100: hsl(141, 100%, 96%);

  /* ——— Neutrals ——— */
  --color-white: hsl(0, 0%, 100%);

  /* ——— Text ——— */
  --color-body-text: var(--color-primary);
  --color-body-dimmed-text: color-mix(in oklch, var(--color-primary) 70%, transparent);
  --color-meta-text: color-mix(in oklch, var(--color-primary) 45%, transparent);

  /* ——— Surfaces / Backgrounds ——— */
  --color-clear-bg: var(--color-white);
  --color-light-bg: hsl(60, 7%, 95%);
  --color-surface-medium: hsl(22, 7%, 60%);
  --color-surface-light: var(--color-light-bg);
  --color-surface-lighter: hsl(60, 8%, 97%);

  /* ——— Borders ——— */
  --color-border-dark: hsl(40, 6%, 70%);
  --color-border-light: hsl(40, 6%, 90%);

  /* ——— Gradients ——— */
  --site-gradient: linear-gradient(to bottom right, var(--color-primary-100), var(--color-primary-300));

  /* ——— Ombres ——— */
  /* Ombre à trois couches : anneau 1px + légère élévation + profondeur ambiante */
  --shadow-border:
    0px 0px 0px 1px rgba(0, 0, 0, 0.06),
    0px 1px 2px -1px rgba(0, 0, 0, 0.06),
    0px 2px 4px 0px rgba(0, 0, 0, 0.04);
  --shadow-border-hover:
    0px 0px 0px 1px rgba(0, 0, 0, 0.08),
    0px 1px 2px -1px rgba(0, 0, 0, 0.08),
    0px 2px 4px 0px rgba(0, 0, 0, 0.06);
  --shadow-border-checked:
    0px 0px 0px 1.5px var(--color-secondary),
    0px 1px 2px -1px rgba(0, 0, 0, 0.06),
    0px 2px 4px 0px rgba(0, 0, 0, 0.04);
}