/* =========================================================
   base.css — reset + tokens + typography
   ========================================================= */

:root {
  /* color */
  --ow-bg: #FFFFFF;
  --ow-bg-muted: #FAFAFA;
  --ow-surface: #F4F4F2;
  --ow-ink: #101114;
  --ow-ink-2: #5C6370;
  --ow-ink-3: #9AA0A8;
  --ow-rule: #E6E8EC;
  --ow-accent: #101114;
  --ow-navy: #1e3a6b;

  /* heat (tag heatmap scale) */
  --ow-h-5: #0f3d14;
  --ow-h-4: #1b5e20;
  --ow-h-3: #2e7d32;
  --ow-h-2: #66bb6a;
  --ow-h-1: #a5d6a7;
  --ow-h-0: #e8f5e9;

  /* spacing */
  --ow-sp-2: 8px;
  --ow-sp-3: 12px;
  --ow-sp-4: 16px;
  --ow-sp-5: 24px;
  --ow-sp-6: 32px;
  --ow-sp-7: 48px;
  --ow-sp-8: 64px;
  --ow-sp-9: 96px;

  /* font stack */
  --ow-sans: "Pretendard Variable", Pretendard, system-ui, sans-serif;
  --ow-mono: ui-monospace, SFMono-Regular, monospace;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--ow-bg);
  color: var(--ow-ink);
  font-family: var(--ow-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01" on;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* accessibility */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  left: 20px;
  top: 12px;
  width: auto;
  height: auto;
  padding: 10px 16px;
  background: var(--ow-ink);
  color: #fff;
  z-index: 1000;
}

/* typography defaults */
h1, h2, h3, h4 { letter-spacing: -0.02em; }
.eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ow-ink-2);
}
.meta {
  font-size: 13px;
  color: var(--ow-ink-2);
  font-weight: 500;
}