/* tokens.css : variables de design.
   Refonte éditoriale, mai 2026.
   Pour changer une couleur dans tout le site, modifie ici. */

:root {
  /* Palette claire (par défaut) : papier crème, vert sapin profond */
  --color-bg: #f6f1e7;
  --color-surface: #fffdf7;
  --color-surface-alt: #ece4d2;
  --color-fg: #1a1817;
  --color-fg-soft: #3d3833;
  --color-muted: #6b6359;
  --color-border: #dcd3bf;
  --color-border-strong: #b9ad94;

  --color-accent: #1e4d3a;
  --color-accent-soft: #dce8df;
  --color-accent-strong: #0f3325;

  --color-warm: #b8541a;
  --color-warm-soft: #f5e0d0;

  --color-link: #1e4d3a;
  --color-success: #2f7a4a;
  --color-warning: #9a6700;
  --color-error: #a02c2c;

  /* Typographies */
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --font-sans: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono",
    Menlo, Consolas, monospace;

  /* Échelle typographique éditoriale */
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-md: 1.1875rem;
  --fs-lg: 1.5rem;
  --fs-xl: 2rem;
  --fs-2xl: 2.75rem;
  --fs-3xl: 3.75rem;
  --fs-4xl: 5rem;

  /* Espacements (basés sur 4px) */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  /* Mise en page */
  --container-narrow: 680px;
  --container-default: 920px;
  --container-wide: 1160px;
  --content-measure: 65ch;

  /* Rayons et ombres */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(28, 26, 23, 0.05),
    0 2px 6px rgba(28, 26, 23, 0.03);
  --shadow-md: 0 4px 14px rgba(28, 26, 23, 0.09);
  --shadow-lg: 0 12px 32px rgba(28, 26, 23, 0.12);

  /* Mouvement */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 120ms;
  --t-base: 220ms;
}

/* Palette sombre : nuit chaude, vert sapin clair */
[data-theme="dark"] {
  --color-bg: #15140f;
  --color-surface: #1c1a14;
  --color-surface-alt: #26231b;
  --color-fg: #f1ece0;
  --color-fg-soft: #c8c1b0;
  --color-muted: #857d6e;
  --color-border: #34302a;
  --color-border-strong: #524c40;

  --color-accent: #5fa985;
  --color-accent-soft: #1c2a23;
  --color-accent-strong: #84c4a3;

  --color-warm: #e08147;
  --color-warm-soft: #2a1a10;

  --color-link: #84c4a3;
  --color-success: #7bbd92;
  --color-warning: #d6b04a;
  --color-error: #e07070;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
}

/* Respecte la préférence système si rien n'est choisi */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #15140f;
    --color-surface: #1c1a14;
    --color-surface-alt: #26231b;
    --color-fg: #f1ece0;
    --color-fg-soft: #c8c1b0;
    --color-muted: #857d6e;
    --color-border: #34302a;
    --color-border-strong: #524c40;
    --color-accent: #5fa985;
    --color-accent-soft: #1c2a23;
    --color-accent-strong: #84c4a3;
    --color-warm: #e08147;
    --color-warm-soft: #2a1a10;
    --color-link: #84c4a3;
    --color-success: #7bbd92;
    --color-warning: #d6b04a;
    --color-error: #e07070;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);
  }
}