/* ═══════════════════════════════════════════════════════════
   base.css — Reset, design tokens, typography
   Zach Miller Studio
═══════════════════════════════════════════════════════════ */

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; background: none; border: none; outline: none; }
ul, ol { list-style: none; }

/* ── Tokens ── */
:root {
  --bg:         #fafafa;
  --ink:        #111111;
  --ink-mid:    #3d3d3d;
  --ink-dim:    #777777;
  --rule:       #cccccc;
  --rule-light: #e8e8e8;
  --accent:     #1a3a5c;
  --white:      #ffffff;

  --font-sans:  'Karla', -apple-system, Helvetica, Arial, sans-serif;
  --font-mono:  'Inconsolata', 'SF Mono', 'Courier New', monospace;

  --ease:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --t-fast: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --t-base: 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --sidebar-w:    260px;
  --pad-top:      80px;
  --pad-bottom:   80px;
  --pad-x:        24px;
  --grid-gap:     30px;
  --section-gap:  3rem;
}

/* ── Body ── */
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--accent); color: var(--white); }