/* Design system : style « site constructeur » — blanc, noir, un accent rouge,
   titres larges en capitales. Thème clair par défaut ; thème sombre seulement
   si le visiteur le choisit (data-theme="dark" sur <html>). */

:root {
  color-scheme: light;

  --paper: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F5F5F5;
  --surface-3: #EBEBEB;
  --ink: #111111;
  --ink-2: #3F3F3F;
  --ink-3: #6B6B6B;
  --line: #E2E2E2;
  --line-strong: #C4C4C4;

  --accent: #E30613;
  --accent-ink: #FFFFFF;
  --accent-soft: #FDE7E8;
  --accent-hover: #B8040F;
  --action: #111111;
  --action-ink: #FFFFFF;
  --action-hover: #333333;
  --lien: #111111;

  --good: #137333;
  --good-soft: #E6F4EA;
  --warn: #9A5B00;
  --warn-soft: #FEF3DC;
  --bad: #C5221F;
  --bad-soft: #FCE8E6;
  --info: #1A4FB5;
  --info-soft: #E8EEFA;

  /* Séries du comparateur : moto A / moto B */
  --s1: #1A4FB5;
  --s1-soft: #E8EEFA;
  --s2: #E30613;
  --s2-soft: #FDE7E8;

  --st-verifie: var(--good);
  --st-unique: var(--info);
  --st-estime: var(--warn);
  --st-introuvable: var(--bad);

  --font: 'Archivo', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --font-titre: var(--font);
  --font-texte: var(--font);
  --font-mono: var(--font);
  --large: 118%;

  --fs-xs: 0.75rem;
  --fs-s: 0.875rem;
  --fs-m: 1rem;
  --fs-l: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: clamp(1.625rem, 1.1rem + 2vw, 2.375rem);
  --fs-3xl: clamp(2.125rem, 1.2rem + 3.8vw, 4rem);

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 56px;
  --sp-8: 80px;
  --radius-s: 4px;
  --radius: 6px;
  --radius-l: 8px;
  --shadow-1: none;
  --shadow-2: 0 8px 24px rgb(0 0 0 / 0.08);
  --shadow-3: 0 16px 48px rgb(0 0 0 / 0.18);
  --focus: 0 0 0 2px var(--paper), 0 0 0 4px var(--info);

  --largeur-max: 1320px;
  --entete-h: 72px;
  --duree: 160ms;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #111214;
  --surface: #17181B;
  --surface-2: #1E2023;
  --surface-3: #2A2C30;
  --ink: #F2F2F2;
  --ink-2: #C9C9C9;
  --ink-3: #9A9A9A;
  --line: #2E3034;
  --line-strong: #474A50;
  --action: #F2F2F2;
  --action-ink: #111214;
  --action-hover: #D9D9D9;
  --lien: #F2F2F2;
  --accent-soft: #3A1114;
  --good: #6CC98E;
  --good-soft: #15291C;
  --warn: #E7B45A;
  --warn-soft: #33260E;
  --bad: #F28B82;
  --bad-soft: #3A1614;
  --info: #8AB4F8;
  --info-soft: #172338;
  --s1: #8AB4F8;
  --s1-soft: #172338;
  --s2: #FF6B6B;
  --s2-soft: #3A1114;
  --shadow-2: 0 8px 24px rgb(0 0 0 / 0.5);
  --shadow-3: 0 16px 48px rgb(0 0 0 / 0.6);
}