/* ============================================================
   main.css — CSS custom properties, reset, base styles
   Amber Harriger Portfolio
   ============================================================ */

:root {
  /* Palette */
  --bordeaux:    #5E0B15;
  --rose:        #90323D;
  --oak:         #D9CAB3;
  --bronze:      #BC8034;
  --taupe:       #8C7A6B;
  --paper:       #f6efe1;
  --paper-light: #fbf6eb;
  --ink:         #1a1310;
  --ink-soft:    #5a4e44;
  --rule:        #cbb898;
  --sand:        oklch(77% 0.038 68); /* warm wheat — Where I'm headed bg */

  /* Typography */
  --font-sans:  'Geist', 'Inter Tight', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-serif: 'Newsreader', 'Source Serif 4', Georgia, serif;
  --font-mono:  'IBM Plex Mono', ui-monospace, monospace;

  /* Spacing */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-26: 104px;
  --space-28: 112px;
  --space-30: 120px;
  --space-32: 128px;

  /* Layout */
  --max-width:       1100px;
  --max-width-prose: 780px;
  --page-pad:        clamp(24px, 4vw, 56px);

  /* Radii */
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-full: 999px;

  /* Shadows */
  --shadow-sm: 0 4px 16px rgba(94,11,21,.08);
  --shadow-md: 0 12px 32px rgba(94,11,21,.12);
  --shadow-lg: 0 24px 60px rgba(94,11,21,.18);

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
}

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

/* ── Base ───────────────────────────────────────────────────── */
body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { font-weight: 500; }
strong { font-weight: 600; }