/* ===== Emersen design tokens ===== */
/* Stone palette + type. The single source of truth for colors, type, spacing. */

:root {
  /* Surfaces — warm cream paper, never pure white */
  --cream:        #F5EFE4;
  --cream-2:      #EDE5D4;
  --paper:        #FAF6EC;

  /* Ink — warm near-black */
  --ink:          #1A1410;
  --ink-2:        #2A211B;

  /* Primary accent — moss green (replaces terracotta clay) */
  --clay:         #4F7A2E;
  --clay-soft:    #7CA152;
  --clay-deep:    #2E4F18;

  /* Supporting accents */
  --moss:         #5B7335;
  --moss-soft:    #88A35E;
  --moss-deep:    #38501F;
  --ochre:        #C99748;
  --ochre-soft:   #DDB372;
  --aubergine:    #5C3D54;
  --aubergine-soft: #826377;
  --teal:         #2F6E6E;
  --rust:         #A14926;
  --stone:        #7A6A55;

  /* Text helpers */
  --muted:        rgba(26, 20, 16, 0.55);
  --hairline:     rgba(26, 20, 16, 0.14);
  --hairline-2:   rgba(26, 20, 16, 0.08);
  --on-dark-mute: rgba(245, 239, 228, 0.6);
  --on-dark-faint:rgba(245, 239, 228, 0.32);
  --on-dark-line: rgba(245, 239, 228, 0.18);

  /* Type — modern grotesk display + research-grade serif body */
  --font-display: 'Schibsted Grotesk', 'Inter', system-ui, sans-serif;
  --font-accent:  'Source Serif 4', 'Spectral', Georgia, serif;
  --font-body:    'Source Serif 4', 'Spectral', Georgia, serif;

  /* Layout */
  --max:          1180px;
  --max-wide:     1280px;
  --pad-x:        56px;
  --radius:       12px;
  --radius-sm:    4px;

  /* Motion */
  --ease:         cubic-bezier(.2,.7,.2,1);
}

@media (max-width: 900px) {
  :root { --pad-x: 28px; }
}
@media (max-width: 600px) {
  :root { --pad-x: 20px; }
}

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
a { color: inherit; }
::selection { background: var(--clay); color: var(--cream); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}