/* ─────────────────────────────────────────────
   base.css
   CSS custom properties, global reset, body,
   and base typography. Apply site-wide.
───────────────────────────────────────────── */

:root {
  --color-cream:         #F7F0DE;
  --color-cream-tint:    rgba(70, 95, 105, 0.04);
  --color-slate:         #46606A;
  --color-slate-soft:    #5A7A82;
  --color-ink:           #2C3D45;
  --color-ink-muted:     #4A5A60;
  --color-ink-subtle:    #6A7A80;
  --color-ink-faint:     #8A969A;
  --color-terracotta:    #B85A3F;
  --color-ochre:         #C4983F;
  --color-border:        rgba(70, 95, 105, 0.15);

  --color-section-fantasy: #B85A3F;
  --color-section-data:    #C4983F;
  --color-section-tools:   #46606A;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--color-cream);
  color: var(--color-ink);
  font-size: 14px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

p { color: var(--color-ink-muted); }

a { color: var(--color-terracotta); text-decoration: none; }
a:hover { text-decoration: underline; }

.divider {
  border: none;
  border-top: 0.5px solid var(--color-border);
  margin: 20px 0;
}