:root {
  /* Couleurs DIRECT HPA — Design System v1.1 */
  --color-brand-primary: #567a88;
  --color-brand-accent: #f4961b;
  --color-action: #285366;
  --color-action-hover: #204454;
  --color-action-active: #183541;
  --color-ink: #192b35;
  --color-text-secondary: #465a64;
  --color-control-border: #657780;
  --color-decorative-border: #d8dfe2;
  --color-disabled: #e5e9eb;
  --color-error: #a12622;
  --color-success: #226348;
  --color-on-dark: #ffffff;

  /* Surfaces */
  --surface-page: #f3f7f8;
  --surface-card: #ffffff;
  --surface-soft: #e6eef1;
  --surface-dark: #192b35;

  /* Typographie */
  --font-sans: Arial, Helvetica, sans-serif;
  --font-weight-regular: 400;
  --font-weight-bold: 700;
  --font-size-h1: 3rem;
  --font-size-h2: 2.25rem;
  --font-size-h3: 1.5rem;
  --font-size-lead: 1.125rem;
  --font-size-body: 1rem;
  --font-size-small: 0.875rem;
  --line-height-h1: 1.15;
  --line-height-h2: 1.2;
  --line-height-h3: 1.3;
  --line-height-body: 1.5;

  /* Espacements */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2rem;
  --space-6: 3rem;
  --space-8: 4rem;
  --space-10: 5rem;

  /* Géométrie */
  --radius-small: 0.25rem;
  --radius-standard: 0.5rem;
  --radius-pill: 9999px;
  --border-control: 1px solid var(--color-control-border);
  --border-decorative: 1px solid var(--color-decorative-border);
  --shadow-none: none;
  --shadow-menu: 0 8px 24px rgba(25, 43, 53, 0.12);
  --shadow-dialog: 0 16px 40px rgba(25, 43, 53, 0.16);

  /* Layout */
  --container-main: 80rem;
  --container-wide: 100rem;
  --container-gutter: 1.5rem;
  --container-gutter-mobile: 1rem;
  --section-inset: 0.3125rem;
  --grid-columns: 12;
  --grid-gap: 1.5rem;
  --reading-max: 68ch;

  /* Breakpoints documentaires — utilisés dans responsive.css */
  --breakpoint-tablet: 48rem;
  --breakpoint-desktop: 62rem;
  --breakpoint-wide: 100rem;

  /* Mouvement */
  --transition-color: 120ms ease;
}