/* Base reset + tokens */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
button { background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* Focus */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Skip link */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  background: var(--ink);
  color: var(--cream);
  padding: 0.75rem 1rem;
  z-index: 100;
  border-radius: 4px;
  font-size: 0.875rem;
}
.skip-link:focus { top: 1rem; }

/* Design tokens */
:root {
  /* Colors — warm neutral foundation, one deep-forest accent */
  --cream:      #F5F1E8;
  --cream-alt:  #FAF6ED;
  --paper:      #FFFBF2;
  --line:       #E4DDCB;
  --line-soft:  #EFE9D8;
  --ink:        #1F231C;
  --ink-muted:  #6C6B60;
  --ink-faint:  #A8A597;
  --accent:     #1F4A34;  /* Deep forest green */
  --accent-hi:  #2D6449;
  --accent-lo:  #14311F;

  /* Type — Satoshi via Fontshare */
  --font-body:  'Satoshi', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:  ui-monospace, 'SF Mono', 'Cascadia Code', 'Roboto Mono', monospace;

  /* Fluid type scale (clamp) */
  --text-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --text-sm:   clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.0625rem);
  --text-lg:   clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  --text-xl:   clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
  --text-2xl:  clamp(2rem, 1.6rem + 1.6vw, 2.75rem);
  --text-3xl:  clamp(2.5rem, 1.9rem + 2.6vw, 4rem);
  --text-hero: clamp(3rem, 2.2rem + 3.5vw, 5.25rem);

  /* Spacing */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-6:  1.5rem;
  --s-8:  2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-20: 5rem;
  --s-24: 6rem;
  --s-32: 8rem;

  /* Layout */
  --container:      min(72rem, 92vw);
  --container-tight: min(44rem, 92vw);
  --container-wide:  min(84rem, 94vw);

  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 16px;

  --shadow-sm: 0 1px 2px rgba(31, 35, 28, 0.04);
  --shadow:    0 4px 12px rgba(31, 35, 28, 0.06);
}