@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-3xl: 40px;

  --leading-tight: 1.15;
  --leading-snug: 1.4;
  --leading-normal: 1.55;

  --tracking-tight: -0.02em;
  --tracking-snug: -0.01em;
  --tracking-normal: 0;
  --tracking-caps: 0.14em;

  --paper: #f5f5f3;
  --paper-2: #ececea;
  --surface: #ffffff;

  --ink: #111111;
  --ink-2: #4a4a48;
  --ink-3: #8a8a86;
  --ink-4: #b8b8b3;
  --ink-5: #d8d8d3;

  --line: #e5e5e0;
  --line-2: #d6d6d0;

  --fg-1: var(--ink);
  --fg-2: var(--ink-2);
  --fg-3: var(--ink-3);
  --fg-4: var(--ink-4);
  --bg-1: var(--paper);
  --bg-2: var(--paper-2);
  --bg-surface: var(--surface);

  --accent: var(--ink);
  --accent-hover: #2a2a2a;
  --accent-ink: #ffffff;
  --success: #2f7a4f;
  --warning: #b07a1f;
  --danger: #a83232;

  --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-16: 64px;
  --space-20: 80px;

  --radius-1: 4px;
  --radius-2: 8px;
  --radius-3: 12px;
  --radius-4: 16px;
  --radius-pill: 999px;

  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(17, 17, 17, 0.04);
  --shadow-2: 0 1px 2px rgba(17, 17, 17, 0.04), 0 0 0 1px var(--line);
  --shadow-3: 0 4px 16px rgba(17, 17, 17, 0.06), 0 0 0 1px var(--line);
  --shadow-focus: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink);

  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;

  --container-narrow: 560px;
  --container: 720px;
  --container-wide: 960px;
}

html,
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg-1);
  background: var(--bg-1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
.h1 {
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 400;
  color: var(--fg-1);
  margin: 0;
}

h1 .accent,
.h1 .accent {
  font-weight: 700;
}

h2,
.h2 {
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-snug);
  font-weight: 400;
  margin: 0;
}

h2 .accent,
.h2 .accent {
  font-weight: 700;
}

h3,
.h3 {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  font-weight: 600;
  margin: 0;
}

h4,
.h4 {
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  font-weight: 600;
  margin: 0;
}

p,
.body {
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--fg-2);
  margin: 0;
}

.meta,
small {
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--fg-3);
}

.caps {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: 500;
}

code,
pre,
kbd {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

code {
  background: var(--bg-2);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-1);
  color: var(--fg-2);
}

a {
  color: var(--fg-1);
  text-decoration: none;
  border-bottom: 1px solid var(--ink-4);
  transition: border-color var(--dur-1) var(--ease-out);
}

a:hover {
  border-bottom-color: var(--ink);
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--space-8) 0;
}

::selection {
  background: var(--ink);
  color: var(--paper);
}