:root {
  /* Champagne gold theme — site-level defaults */
  --bg:           oklch(100% 0 0);
  --bg-subtle:    oklch(97% 0.008 76);
  --ink:          oklch(20% 0.035 68);
  /* Pinned darker (L 38%) so small muted text (.post-summary, snippets, TOC,
     card dates) clears WCAG AA 4.5:1 even over tinted backgrounds. */
  --ink-muted:    oklch(38% 0.05 70);
  --gold:         oklch(44% 0.14 72);
  --gold-light:   oklch(60% 0.16 74);
  --gold-tint:    oklch(93% 0.055 78);
  --border:       oklch(80% 0.08 74 / 0.4);
  --border-gold:  oklch(65% 0.14 74 / 0.45);
  /* Contrast-safe accent text: clamp the accent's lightness so a user-supplied
     light accent (gold/teal/champagne) can never be used as link text below
     4.5:1 on --bg. Consumed in place of raw --gold for link/inline text. */
  --gold-text:    oklch(from var(--gold) clamp(0.28, l, 0.5) c h);
  /* Foreground for text placed ON an accent background: dark ink when the
     accent is light (L>0.62), near-white otherwise — keeps button/badge text
     legible regardless of the per-member accent. */
  --on-accent:    oklch(from var(--gold) clamp(0, (0.62 - l) * 1000, 1) 0 0 / 1);
  /* Single radius scale — every card/input/button/code-block/dropdown corner
     pulls from these tokens so the whole site shares one rounding language.
     --radius   : default control/card corner
     --radius-sm: inline chips, code, small accents
     --radius-lg: elevated surfaces (dropdowns, dialogs, lightbox tools)
     --radius-pill: fully-rounded pills (badges, search field) */
  --radius:       6px;
  --radius-sm:    3px;
  --radius-lg:    10px;
  --radius-pill:  99px;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:          oklch(13% 0.014 60);
    --bg-subtle:   oklch(17% 0.018 62);
    --ink:         oklch(91% 0.018 78);
    /* Pinned lighter (L 70%) in dark mode so small muted text clears 4.5:1. */
    --ink-muted:   oklch(70% 0.055 72);
    --gold:        oklch(72% 0.18 80);
    --gold-light:  oklch(80% 0.18 82);
    --gold-tint:   oklch(20% 0.04 70);
    --border:      oklch(32% 0.05 68 / 0.55);
    --border-gold: oklch(52% 0.13 76 / 0.5);
  }
}

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

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
  min-width: 0;
}

a {
  color: var(--gold);
  text-decoration: none;
  transition: color 0.18s var(--ease-out-quart);
}

a:hover {
  color: var(--gold-light);
}

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

/* Visible keyboard focus for all interactive elements. Mouse clicks do not
   trigger :focus-visible, so this only shows for keyboard/AT users. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Visually-hidden but available to screen readers (skip links, labels). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Skip-to-content link becomes visible when focused. Offset clear of the fixed
   ~44px TOC toggle (left:14px) so the two never visually overlap. */
.skip-link:focus {
  position: fixed;
  top: 8px;
  left: 68px;
  width: auto;
  height: auto;
  padding: 0.5rem 1rem;
  margin: 0;
  clip: auto;
  background: var(--gold);
  color: var(--on-accent);
  z-index: 10000;
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}