/* ========================================================
   Éduquer Sans Violence — Design Tokens
   Extracted from official brand charter
   ======================================================== */

@import url("fonts.css");

:root {
  /* Primary — forest greens from logo */
  --esv-forest: #608040;
  --esv-forest-deep: #3d5428;
  --esv-forest-dark: #2a3b1c;
  --esv-sage: #8fa66d;
  --esv-sage-soft: #b8c99a;
  --esv-moss: #4d6a33;

  /* Earthy complements */
  --esv-terracotta: #c77a54;
  --esv-ocre: #d9a74a;
  --esv-cream: #f5efe3;
  --esv-sand: #e8ddc6;
  --esv-clay: #a56548;

  /* Warm neutrals */
  --esv-ink: #1f241a;
  --esv-charcoal: #3a3f35;
  --esv-stone: #6b6f62;
  --esv-mist: #c8cabe;
  --esv-paper: #fbf8f1;
  --esv-white: #ffffff;

  /* Typography */
  --serif: 'Crimson Pro', Georgia, serif;
  --sans: 'Manrope', -apple-system, system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-xl: 36px;

  /* Density — switchable */
  --density: 1;
  --sp-1: calc(4px * var(--density));
  --sp-2: calc(8px * var(--density));
  --sp-3: calc(12px * var(--density));
  --sp-4: calc(16px * var(--density));
  --sp-6: calc(24px * var(--density));
  --sp-8: calc(32px * var(--density));
  --sp-12: calc(48px * var(--density));
  --sp-16: calc(64px * var(--density));
  --sp-24: calc(96px * var(--density));

  /* Surface — light mode default */
  --surface: var(--esv-paper);
  --surface-elev: var(--esv-white);
  --surface-inset: var(--esv-cream);
  --surface-sand: var(--esv-sand);
  --text: var(--esv-ink);
  --text-soft: var(--esv-charcoal);
  --text-mute: var(--esv-stone);
  --border: rgba(31, 36, 26, 0.12);
  --border-strong: rgba(31, 36, 26, 0.22);
}

[data-theme="dark"] {
  --surface: #141712;
  --surface-elev: #1f241a;
  --surface-inset: #262b20;
  --surface-sand: #2e3427;
  --text: var(--esv-cream);
  --text-soft: var(--esv-mist);
  --text-mute: #8a8e80;
  --border: rgba(245, 239, 227, 0.12);
  --border-strong: rgba(245, 239, 227, 0.22);
  --esv-forest: #7ca052;
  --esv-forest-deep: #9bbf72;
}

[data-density="compact"] { --density: 0.75; }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--surface);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--text);
}
h1 em, h2 em, h3 em { font-style: italic; color: var(--esv-forest); }

a { color: inherit; }

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--esv-forest);
}

.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--sp-8);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 14px 22px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
}
.btn-primary {
  background: var(--esv-forest-deep);
  color: var(--esv-cream);
}
.btn-primary:hover { background: var(--esv-forest-dark); transform: translateY(-1px); }
.btn-secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong);
}
.btn-secondary:hover { background: var(--surface-inset); }
.btn-terracotta {
  background: var(--esv-terracotta);
  color: var(--esv-cream);
}
.btn-terracotta:hover { background: var(--esv-clay); }