/* ==========================================================================
   theme.css — Jetons de design « Encre » + styles de base.
   Source unique de vérité pour la charte : couleurs, typo, rayons, ombres.
   Aucune valeur en dur ailleurs : tout passe par ces variables.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@500;600;700&family=Figtree:wght@400;500;600;700&display=swap');

:root {
  /* — Couleurs de rôle — */
  --color-bg: #f7f3ec;
  --color-surface: #fffdf9;
  --color-text: #1b1a24;
  --color-accent: #2b3a67;
  --color-accent-2: #b8925a;
  --color-divider: color-mix(in srgb, #1b1a24 14%, transparent);

  /* — Rampes tonales 100 → 900 (même pas perceptuel entre rôles) — */
  --color-neutral-100: #faf8f4;
  --color-neutral-200: #f0ece4;
  --color-neutral-300: #dfd9cd;
  --color-neutral-400: #c1bab0;
  --color-neutral-500: #9d968c;
  --color-neutral-600: #7c766d;
  --color-neutral-700: #5d5851;
  --color-neutral-800: #403c37;
  --color-neutral-900: #26232a;

  --color-accent-100: #eceff8;
  --color-accent-200: #cdd3e8;
  --color-accent-300: #9aa5c9;
  --color-accent-400: #5c6a9b;
  --color-accent-500: #2b3a67;
  --color-accent-600: #22305a;
  --color-accent-700: #1a254a;
  --color-accent-800: #131b38;
  --color-accent-900: #0d1226;

  --color-accent-2-100: #faf3e6;
  --color-accent-2-200: #f2e4c8;
  --color-accent-2-300: #e6cf9f;
  --color-accent-2-400: #d4b177;
  --color-accent-2-500: #b8925a;
  --color-accent-2-600: #9a7745;
  --color-accent-2-700: #7a5d33;
  --color-accent-2-800: #574224;
  --color-accent-2-900: #362916;

  --color-danger: #b3261e;
  --color-danger-100: #fbe6e4;
  --color-danger-800: #8a1c14;

  /* — Typographie — */
  --font-heading: "Bricolage Grotesque", system-ui, sans-serif;
  --font-heading-weight: 600;
  --font-body: "Figtree", system-ui, sans-serif;

  /* — Espacement — */
  --space-1: 4px;
  --space-2: 9px;
  --space-3: 13px;
  --space-4: 18px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;
  --space-10: 64px;
  --space-12: 88px;

  /* — Rayons — */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* — Élévation — */
  --shadow-sm: 0 1px 2px rgba(27, 26, 36, .08);
  --shadow-md: 0 4px 14px rgba(27, 26, 36, .10);
  --shadow-lg: 0 16px 40px rgba(27, 26, 36, .14);

  /* — Gabarit — */
  --container: 1200px;
}

/* — Réinitialisation légère — */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  line-height: 1.12;
  letter-spacing: -0.03em;
  margin: 0 0 var(--space-2);
}
h4, h5 { letter-spacing: -0.01em; }

p { margin: 0 0 var(--space-3); }

a { color: var(--color-accent); text-decoration: none; text-underline-offset: 3px; }
a:hover { color: var(--color-accent-700); }

img { display: block; max-width: 100%; }
figure { margin: 0; }
ul, ol { margin: 0; padding: 0; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 26%, transparent); }

/* — Utilitaires de texte — */
.muted { color: var(--color-neutral-600); }
.text-center { text-align: center; }
.nowrap { white-space: nowrap; }

/* — Utilitaires d'espacement — */
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mt-10 { margin-top: var(--space-10); }
.w-narrow { max-width: 440px; margin-left: auto; margin-right: auto; }