/* Aparté — variables de marque (générées depuis tokens.json). Thème clair par défaut ; sombre via [data-theme="dark"] ou la préférence système. */
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-latin-full-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  src: url("../fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible Mono";
  src: url("../fonts/atkinson-hyperlegible-mono-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root, [data-theme="light"] {
  --petrole: #17606b;
  --nuit: #0f2e36;
  --signal: #f2a93b;
  --brume: #f6f3ec;
  --sable: #eae4d7;
  --surface: #f6f3ec;
  --surface-raised: #ffffff;
  --surface-sunken: #eae4d7;
  --surface-inverse: #0f2e36;
  --ink: #14232a;
  --ink-muted: #4d5d63;
  --ink-inverse: #f6f3ec;
  --border: #d9d2c4;
  --border-strong: #7a756a;
  --primary: #17606b;
  --primary-hover: #124e57;
  --on-primary: #ffffff;
  --accent: #f2a93b;
  --on-accent: #0f2e36;
  --focus: #17606b;
  --info: #17606b;
  --info-soft: #ddedee;
  --success: #276a49;
  --success-soft: #e3efe7;
  --warning: #8a5300;
  --warning-soft: #fbebd0;
  --danger: #b23a2a;
  --danger-soft: #f8e3df;
  --shadow-overlay: 0 8px 24px rgba(15, 46, 54, 0.12);
}

[data-theme="dark"] {
  --surface: #0b1c21;
  --surface-raised: #132a30;
  --surface-sunken: #08151a;
  --surface-inverse: #1f4750;
  --ink: #eef2ef;
  --ink-muted: #a3b4b6;
  --border: #22393f;
  --border-strong: #6a878d;
  --primary: #6cc3cc;
  --primary-hover: #8ad3da;
  --on-primary: #0b1c21;
  --accent: #f2b04a;
  --focus: #f2b04a;
  --info: #6cc3cc;
  --info-soft: #12353b;
  --success: #6bc59a;
  --success-soft: #15342a;
  --warning: #f2b04a;
  --warning-soft: #3a2a0e;
  --danger: #f0846f;
  --danger-soft: #3d1c17;
  --shadow-overlay: 0 8px 24px rgba(0, 0, 0, 0.45);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface: #0b1c21;
    --surface-raised: #132a30;
    --surface-sunken: #08151a;
    --surface-inverse: #1f4750;
    --ink: #eef2ef;
    --ink-muted: #a3b4b6;
    --border: #22393f;
    --border-strong: #6a878d;
    --primary: #6cc3cc;
    --primary-hover: #8ad3da;
    --on-primary: #0b1c21;
    --accent: #f2b04a;
    --focus: #f2b04a;
    --info: #6cc3cc;
    --info-soft: #12353b;
    --success: #6bc59a;
    --success-soft: #15342a;
    --warning: #f2b04a;
    --warning-soft: #3a2a0e;
    --danger: #f0846f;
    --danger-soft: #3d1c17;
    --shadow-overlay: 0 8px 24px rgba(0, 0, 0, 0.45);
  }
}

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --radius-anchor: 0px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-text: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, sans-serif;
  --font-mono: "Atkinson Hyperlegible Mono", ui-monospace, "SFMono-Regular", monospace;
}

/* Styles typographiques */
.text-display { font-family: var(--font-display); font-size: 52px; line-height: 56px; font-weight: 600; letter-spacing: -0.01em; font-variation-settings: "opsz" 96; }
.text-h1 { font-family: var(--font-display); font-size: 38px; line-height: 44px; font-weight: 600; letter-spacing: -0.005em; font-variation-settings: "opsz" 72; }
.text-h2 { font-family: var(--font-display); font-size: 28px; line-height: 34px; font-weight: 600; font-variation-settings: "opsz" 36; }
.text-h3 { font-family: var(--font-display); font-size: 22px; line-height: 28px; font-weight: 600; font-variation-settings: "opsz" 24; }
.text-lead { font-family: var(--font-text); font-size: 20px; line-height: 30px; font-weight: 400; }
.text-body { font-family: var(--font-text); font-size: 17px; line-height: 27px; font-weight: 400; }
.text-body-strong { font-family: var(--font-text); font-size: 17px; line-height: 27px; font-weight: 700; }
.text-small { font-family: var(--font-text); font-size: 15px; line-height: 22px; font-weight: 400; }
.text-label { font-family: var(--font-text); font-size: 15px; line-height: 20px; font-weight: 700; letter-spacing: 0.01em; }
.text-caption { font-family: var(--font-text); font-size: 13px; line-height: 18px; font-weight: 400; }
.text-code { font-family: var(--font-mono); font-size: 20px; line-height: 28px; font-weight: 500; letter-spacing: 0.08em; }

/* Socle */
body { background: var(--surface); color: var(--ink); font-family: var(--font-text); font-size: 17px; line-height: 27px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }