/* ── Light tokens ── */
:root {
  --bg:           #F7F4EE;
  --surface:      #FFFFFF;
  --cream:        #EDEAE0;
  --ochre:        #C8922A;
  --ochre-faint:  #F5E9CC;
  --sage:         #3F6E50;
  --sage-mid:     #4A7A5C;
  --sage-faint:   #E8F2EC;
  --text:         #1C1C18;
  --text-muted:   #6A6A5E;
  --border:       #DDD8CC;
  --red:          #B03030;
  --red-faint:    #FBEAEA;

  --nav-bg:       rgba(247,244,238,.92);
  --dot-color:    rgba(28,28,20,.06);
  --shadow-card:  0 2px 8px rgba(28,28,20,.05), 0 12px 40px rgba(28,28,20,.08);
  --focus-ring:   rgba(63,110,80,.15);
  --btn-shadow:   rgba(63,110,80,.28);

  --font-display: 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;
  --font-mono:    'SF Mono', 'Fira Code', monospace;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 24px;
  --ease: .18s ease;
}

/* ── Dark / chalkboard tokens ── */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:           #1B3A2D;
    --surface:      #224A38;
    --cream:        #142D22;
    --ochre:        #D4A843;
    --ochre-faint:  rgba(212,168,67,.18);
    --sage:         #F0EDE4;
    --sage-mid:     #DDD9D0;
    --sage-faint:   rgba(240,237,228,.12);
    --text:         #F0EDE4;
    --text-muted:   #8AAB8A;
    --border:       rgba(240,237,228,.14);
    --red:          #FF7A6E;
    --red-faint:    rgba(255,122,110,.12);

    --nav-bg:       rgba(27,58,45,.92);
    --dot-color:    rgba(240,237,228,.08);
    --shadow-card:  0 0 0 1px rgba(240,237,228,.07), 0 4px 24px rgba(0,0,0,.35);
    --focus-ring:   rgba(240,237,228,.12);
    --btn-shadow:   rgba(240,237,228,.15);
  }
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* ── Base ── */
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}

/* ── Shared input base ── */
input[type="email"],
input[type="text"],
input[type="password"],
input[type="search"],
select {
  width: 100%;
  padding: 12px 15px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  font-family: var(--font-body);
  font-size: .95rem;
  color: var(--text);
  background: var(--bg);
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  transition: border-color var(--ease), background var(--ease), box-shadow var(--ease);
}
input[type="email"]:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
select:focus {
  border-color: var(--sage-mid);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
input::placeholder { color: var(--text-muted); opacity: .6; }

/* ── Shared animation ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}