@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/geist-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/assets/fonts/geist-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ─── Colors (dark theme, mirrors savko.dev) ─── */
  --color-bg:           oklch(0.145 0 0);   /* near-black  */
  --color-fg:           oklch(0.985 0 0);   /* near-white  */
  --color-primary:      oklch(0.985 0 0);   /* white accent */
  --color-primary-fg:   oklch(0.205 0 0);
  --color-secondary:    oklch(0.269 0 0);   /* card bg     */
  --color-secondary-fg: oklch(0.985 0 0);
  --color-muted:        oklch(0.269 0 0);
  --color-muted-fg:     oklch(0.708 0 0);   /* subtle text */
  --color-border:       oklch(0.269 0 0);
  --color-border-hover: oklch(0.985 0 0);

  /* ─── Typography ─── */
  --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'Fira Code', monospace;

  /* ─── Spacing (multiples of 4px) ─── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ─── Border radius ─── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   10px;   /* matches Next.js --radius: 0.625rem */
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* ─── Transitions ─── */
  --t-fast: 150ms ease;
  --t-base: 300ms ease;

  /* ─── Layout ─── */
  --container-max: 1200px;
  --container-pad: var(--sp-4);
  --header-h: 64px;
}

@media (min-width: 768px) {
  :root {
    --container-pad: var(--sp-8);
  }
}