/* Design tokens. All other CSS reads from these. */
:root {
  /* Light-green accent — sole brand color */
  --color-accent: #d8ecd0;
  --color-accent-soft: #eaf4e4;
  --color-accent-strong: #5e9b5a;
  --color-accent-ink: #2a4a2a;

  /* Mark — paired with --color-accent on the wordmark and favicon */
  --color-mark: #b03a2e;

  /* Neutrals */
  --color-bg: #ffffff;
  --color-surface: #fafafa;
  --color-surface-2: #f3f3f1;
  --color-border: #e6e6e3;
  --color-border-strong: #cfcfcb;
  --color-text: #1a1a1a;
  --color-text-muted: #5b5b58;
  --color-text-faint: #8a8a86;
  --color-link: var(--color-accent-ink);
  --color-link-hover: var(--color-accent-strong);

  /* Typography */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --font-handwriting: "Caveat", "Bradley Hand", "Segoe Print", cursive;
  --font-base: 17px;
  --line-base: 1.6;
  --line-tight: 1.25;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: 1.75rem;
  --fs-2xl: 2.25rem;

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

  /* Spacing scale (rem) */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;

  /* Layout */
  --sidebar-width: 280px;
  --topnav-height: 64px;
  --content-max: 68ch;
  --hero-max: 960px;
  --page-max: 1200px;

  /* Reading column: centered wrt the viewport, but never under the fixed sidebar.
     Used for .article and .highlighted on desktop. */
  --reading-margin-left: max(
    calc(var(--sidebar-width) + var(--sp-6)),
    calc((100vw - var(--content-max)) / 2)
  );
  --reading-margin-right: max(
    var(--sp-6),
    calc((100vw - var(--content-max)) / 2)
  );

  /* Radii / shadows / transitions */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;

  --shadow-sm: 0 1px 2px rgba(20, 30, 20, 0.04), 0 1px 1px rgba(20, 30, 20, 0.03);
  --shadow-md: 0 4px 12px rgba(20, 30, 20, 0.06), 0 2px 4px rgba(20, 30, 20, 0.04);
  --shadow-lg: 0 12px 28px rgba(20, 30, 20, 0.10), 0 4px 8px rgba(20, 30, 20, 0.05);

  --t-fast: 120ms ease;
  --t-base: 200ms ease;
  --t-slow: 320ms cubic-bezier(0.2, 0.8, 0.2, 1);

  --z-topnav: 50;
  --z-sidebar: 40;
  --z-backdrop: 30;
}

/* Base reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: var(--font-base);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--line-base);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--sp-4);
  line-height: var(--line-tight);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}

p {
  margin: 0 0 var(--sp-4);
}

a {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--t-fast);
}

a:hover {
  color: var(--color-link-hover);
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-accent-strong);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

hr {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: var(--sp-6) 0;
}

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

/* Skip link */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--sp-4);
  padding: var(--sp-2) var(--sp-4);
  background: var(--color-accent-ink);
  color: #fff;
  text-decoration: none;
  border-radius: var(--radius-sm);
  z-index: 100;
  transition: top var(--t-fast);
}

.skip-link:focus {
  top: var(--sp-3);
  color: #fff;
}