@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400;0,500;0,600;0,700;1,500&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,400;1,8..60,500&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --font-sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --gray-0: oklch(100% 0 90);
  --gray-25: oklch(99% 0.002 90);
  --gray-50: oklch(97.3% 0.003 90);
  --gray-100: oklch(95% 0.004 90);
  --gray-150: oklch(92% 0.005 90);
  --gray-200: oklch(89% 0.006 90);
  --gray-300: oklch(81% 0.007 90);
  --gray-400: oklch(67% 0.009 90);
  --gray-500: oklch(55% 0.009 90);
  --gray-600: oklch(45% 0.009 90);
  --gray-700: oklch(36% 0.008 88);
  --gray-800: oklch(27% 0.007 88);
  --gray-850: oklch(22% 0.006 88);
  --gray-900: oklch(18.5% 0.006 88);
  --gray-950: oklch(14.5% 0.005 88);
  --gray-1000: oklch(9% 0.004 88);

  --blue-100: oklch(93% 0.03 250);
  --blue-300: oklch(80% 0.08 250);
  --blue-400: oklch(72% 0.11 250);
  --blue-500: oklch(63% 0.135 250);
  --blue-600: oklch(53% 0.14 251);
  --blue-700: oklch(44% 0.13 252);
  --blue-800: oklch(35% 0.11 253);

  --green-500: oklch(62% 0.12 148);
  --green-600: oklch(52% 0.11 148);
  --amber-500: oklch(76% 0.14 78);
  --amber-600: oklch(64% 0.14 70);
  --red-500: oklch(60% 0.17 25);
  --red-600: oklch(52% 0.17 25);

  color-scheme: light;
  --bg-page: var(--gray-25);
  --bg-surface: var(--gray-0);
  --bg-inset: var(--gray-50);

  --border-subtle: var(--gray-150);
  --border-default: var(--gray-300);
  --border-strong: var(--gray-400);

  --text-primary: var(--gray-950);
  --text-secondary: var(--gray-600);
  --text-tertiary: var(--gray-500);
  --text-on-accent: var(--gray-0);

  --accent: var(--blue-600);
  --accent-hover: var(--blue-700);
  --accent-active: var(--blue-800);
  --accent-subtle-bg: var(--blue-100);
  --accent-subtle-border: var(--blue-300);

  --signal-success: var(--green-600);
  --signal-success-bg: oklch(94% 0.04 148);
  --signal-warning: var(--amber-600);
  --signal-warning-bg: oklch(95% 0.05 78);
  --signal-error: var(--red-600);
  --signal-error-bg: oklch(95% 0.04 25);

  --code-bg: var(--gray-950);
  --code-text: var(--gray-100);
  --code-border: var(--gray-800);

  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 1.875rem;
  --text-3xl: 2.375rem;
  --text-4xl: 3rem;
  --text-5xl: 3.875rem;
  --text-6xl: 4.75rem;

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;

  --tracking-tight: -0.02em;
  --tracking-tighter: -0.03em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --content-max-width: 72rem;
  --prose-max-width: 42rem;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 999px;

  --shadow-xs: 0 1px 2px rgba(20,20,20,0.04);
  --shadow-sm: 0 1px 3px rgba(20,20,20,0.05), 0 1px 2px rgba(20,20,20,0.04);
  --shadow-md: 0 4px 12px rgba(20,20,20,0.06), 0 1px 3px rgba(20,20,20,0.05);
  --shadow-lg: 0 12px 32px rgba(20,20,20,0.09), 0 2px 6px rgba(20,20,20,0.05);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  text-transform: lowercase;
}

p { margin: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }
code, pre { font-family: var(--font-mono); }
::selection { background: var(--accent-subtle-bg); color: var(--text-primary); }