/* ====================================================================
   Design tokens — single source of truth for visual styling.
   To re-theme a new site, override these custom properties.
   Components and pages reference these tokens, never raw values.
   ==================================================================== */

:root {
  /* ---- Colors ---- */
  --color-ink:         #1a2330;
  --color-muted:       #5a6472;
  --color-line:        #e6e9ee;
  --color-bg:          #ffffff;
  --color-bg-alt:      #f7f8fa;
  --color-accent:      #c0392b;
  --color-accent-dark: #9a2d22;
  --color-success:     #1d8438;  /* 4.76:1 on white — clears WCAG AA (was #1f8a3b, 4.41:1) */

  /* ---- Type families ---- */
  --font-body:    "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Cabinet Grotesk", "Geist", sans-serif;
  --font-accent:  "Newsreader", Georgia, serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- Spacing scale ---- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;

  /* ---- Radius ---- */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ---- Shadow ---- */
  --shadow-1: 0 1px 2px rgba(20, 30, 50, 0.06);
  --shadow-2: 0 8px 24px rgba(20, 30, 50, 0.10);

  /* ---- Layout ---- */
  --container-max: 1080px;
  --prose-max:     70ch;

  /* ---- Legacy alias (kept for any inline reference using --accent) ---- */
  --accent: var(--color-accent);
  --ink:    var(--color-ink);
  --muted:  var(--color-muted);
  --line:   var(--color-line);
  --bg:     var(--color-bg);
}

/* ====================================================================
   Global element rules — ported from the old Base.astro inline styles
   and rewritten against tokens. Edit cautiously: a new site shouldn't
   need to override anything here.
   ==================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--color-ink);
  line-height: 1.15;
  margin: 0 0 var(--space-3);
  font-weight: 700;
  letter-spacing: -0.01em;
}

h1 { font-size: 2.5rem;  font-weight: 800; letter-spacing: -0.02em; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.15rem; margin-top: var(--space-4); }

p, ul, ol { margin: 0 0 var(--space-3); }
ul, ol    { padding-left: var(--space-4); }
li        { margin-bottom: var(--space-1); }

a {
  color: var(--color-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover { color: var(--color-accent-dark); }

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

/* Container helper */
.wrap {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

/* Readable line-length for prose inside content sections.
   Cards, grids, hero subhead, image captions are unconstrained. */
.section .prose,
.section > p,
.section > ul,
.section > ol,
.section > h2 + p,
.section > h3 + p,
.section > blockquote {
  max-width: var(--prose-max);
}

/* Pull-quote / accent — the ONLY use of --font-accent. */
blockquote.accent {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 1.35rem;
  line-height: 1.45;
  color: var(--color-ink);
  border-left: 3px solid var(--color-accent);
  padding: var(--space-2) var(--space-4);
  margin: var(--space-5) 0;
  max-width: var(--prose-max);
}

/* ====================================================================
   Mobile responsive overrides — preserved verbatim from old Base.astro
   so the sticky-bottom-bar conversion path on mobile does NOT regress.
   ==================================================================== */

@media (max-width: 640px) {
  body { padding-bottom: 54px; }   /* room for sticky CTA bar */
  h1   { font-size: 1.75rem; }
  h2   { font-size: 1.35rem; }
}