:root,[data-theme='light']{
  --font-display:'SB Sans Display',system-ui,sans-serif;
  --font-body:'SB Sans Text',system-ui,sans-serif;
  --text-xs:clamp(.75rem,.7rem + .25vw,.8125rem);
  --text-sm:clamp(.875rem,.82rem + .3vw,.9375rem);
  --text-base:clamp(1.0625rem,1rem + .3vw,1.125rem);
  --text-lg:clamp(1.1875rem,1.05rem + .65vw,1.4375rem);
  --text-xl:clamp(1.625rem,1.2rem + 1.1vw,2.375rem);
  --text-2xl:clamp(2.125rem,1.35rem + 2.4vw,3.375rem);
  --text-3xl:clamp(2.75rem,1.6rem + 3.8vw,4.75rem);
  --space-1:.25rem;--space-2:.5rem;--space-3:.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;
  --color-gold:#21a038;
  --color-bg:#f4efe6;
  --color-surface:#fffdf8;
  --color-surface-2:#ffffff;
  --color-surface-offset:#ebe4d8;
  --color-text:#3f3a34;
  --color-heading:#1a1714;
  --color-text-muted:#7a736a;
  --color-text-inverse:#fffdf8;
  --color-ink:#1a1714;
  --color-accent:#21a038;
  --color-on-accent:#ffffff;
  --color-cta:#e85d04;
  --color-border:#d9cfc0;
  --color-success:#21a038;
  --radius-sm:.5rem;
  --radius-md:.875rem;
  --radius-lg:1.375rem;
  --radius-pill:999px;
  --transition:260ms cubic-bezier(.22,1,.36,1);
  --content-wide:1160px;
  --content-narrow:720px;
  --soft-shadow:0 18px 50px rgba(26,23,20,.08);
}
body{font-family:var(--font-body);background:var(--color-bg);color:var(--color-text);font-weight:400}
h1,h2,h3{font-family:var(--font-display);color:var(--color-heading);font-weight:600;letter-spacing:-.025em}
[data-theme='dark']{
  --color-bg:#12100e;
  --color-surface:#1c1916;
  --color-surface-2:#262220;
  --color-surface-offset:#3a3530;
  --color-text:#e8e2da;
  --color-heading:#faf7f2;
  --color-text-muted:#b0a89c;
  --color-text-inverse:#1a1714;
  --color-ink:#0e0c0a;
  --color-accent:#3ddc68;
  --color-border:#4a433c;
  --soft-shadow:0 18px 50px rgba(0,0,0,.35);
}
[data-theme='dark'] .article-shell,
[data-theme='dark'] .article-content,
[data-theme='dark'] .article-hero{color:var(--color-text)}
[data-theme='dark'] .article-content h2,
[data-theme='dark'] .article-hero h1{color:var(--color-heading)}