/* =========================================================================
   theme.css — the ONE shared stylesheet for the whole site.
   Every page links this first; page-specific layout stays in each page.

   What lives here (change it once, it changes everywhere):
     • the dual-theme color palette (dark default + light)         → :root blocks
     • the type scale — font sizes, incl. the base body size       → --fs-*
     • fonts, nav bar, light/dark toggle, the CSS reset + body base

   Naming note: pages historically used different names for the same color
   (--accent vs --coral, --sans vs --body, --ink-2 vs --ink-dim). The canonical
   names are --coral / --body / --ink-dim; the others are kept as ALIASES below
   so existing page CSS keeps working. Values match styles.css (the master-map
   diagram is fully token-driven, so its values must not drift).
   ========================================================================= */

:root, :root[data-theme="dark"] {
  /* surfaces */
  --bg:#0c0b0a; --panel:#16130f; --panel-2:#1c1813;
  --soft:var(--panel-2); --surface:var(--panel);     /* aliases (index used these names) */

  /* ink */
  --ink:#efe9e1; --ink-dim:#c3bbb0; --muted:#8c847a; --faint:#6a635b;
  --ink-2:var(--ink-dim);                             /* alias */

  /* lines */
  --line:rgba(236,231,224,.085); --line-2:rgba(236,231,224,.16); --line-strong:rgba(236,231,224,.30);

  /* accent (canonical = --coral; --accent* are aliases index used) */
  --coral:#ec8159; --coral-bright:#ff9d72; --accent-soft:rgba(236,129,89,.12);
  --accent:var(--coral); --accent-bright:var(--coral-bright);

  /* nav — fixed dark in BOTH themes so the white/gold logo always reads */
  --nav-bg:#17140f; --nav-ink:#efe9e1; --nav-faint:#9b948a; --nav-line:rgba(255,255,255,.08);

  /* fonts (canonical body var = --body; --sans is an alias index used) */
  --display:"Fraunces",Georgia,serif;
  --body:"Hanken Grotesk",system-ui,sans-serif; --sans:var(--body);
  --mono:"JetBrains Mono",ui-monospace,monospace;

  --radius:14px; --ease:cubic-bezier(.22,1,.36,1);

  /* ---- type scale: the one place to make text bigger/smaller ---- */
  --fs-base:18.5px;   /* page body text */
  --fs-lead:20px;     /* lead paragraphs (section intros) */
  --fs-title:19.5px;  /* list / row titles */
  --fs-md:16.5px;     /* cards, secondary paragraphs */
  --fs-sm:15.5px;     /* descriptions, small notes */
}

:root[data-theme="light"] {
  --bg:#fcfbf8; --panel:#ffffff; --panel-2:#f5f3ec;
  --ink:#1a160f; --ink-dim:#4a443c; --muted:#6b655c; --faint:#948d83;
  --line:rgba(26,22,15,.10); --line-2:rgba(26,22,15,.16); --line-strong:rgba(26,22,15,.32);
  --coral:#c45f3c; --coral-bright:#e07a4f; --accent-soft:rgba(196,95,60,.10);
}

/* ---- reset + base ---- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--body); font-size:var(--fs-base); line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background .3s var(--ease),color .3s var(--ease);
}
a{color:inherit;text-decoration:none}

/* ---- nav (shared across every page) ---- */
.nav{position:sticky;top:0;z-index:50;background:var(--nav-bg);border-bottom:1px solid var(--nav-line)}
.nav .row{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,34px);height:62px;display:flex;align-items:center;justify-content:space-between}
.nav .brand{display:flex;align-items:center}
.nav .brand img{height:25px;width:auto;display:block}
.nav .links{display:flex;align-items:center;gap:22px;font-family:var(--mono);font-size:12.5px;letter-spacing:.03em}
.nav .links a{color:var(--nav-faint);text-decoration:none;transition:color .15s}
.nav .links a:hover,.nav .links a.active,.nav .links a.navactive{color:var(--nav-ink)}
.nav .links a.cta{color:#17140f;background:var(--coral);padding:7px 14px;border-radius:8px;font-weight:600}
.nav .links a.cta:hover{background:var(--coral-bright)}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;border:1px solid var(--nav-line);background:transparent;color:var(--nav-faint);cursor:pointer;transition:color .15s,border-color .15s}
.theme-toggle:hover{color:var(--nav-ink);border-color:rgba(255,255,255,.22)}
:root[data-theme="dark"] .theme-toggle .ic-moon{display:none}
:root[data-theme="light"] .theme-toggle .ic-sun{display:none}
@media(max-width:620px){ .nav .links a:not(.cta){display:none} }