/* =========================================================
   theme.css — shared design tokens & base styles
   Used by every page in this site (landing page + subject
   pages). Subject-specific layout lives in each subject's
   own stylesheet; only truly reusable pieces belong here.
   ========================================================= */

:root{
  --paper:#EEE7D8;
  --paper-dark:#E2D8C0;
  --card:#F7F2E7;
  --ink:#2A2420;
  --ink-soft:#5C5040;
  --ink-faint:#8A7D68;
  --maroon:#7C2D2D;
  --maroon-deep:#571F1F;
  --forest:#33463B;
  --gold:#A67C3D;
  --line:#C9BC9B;
  --shadow: 0 18px 40px -20px rgba(42,36,32,.45);
  --serif:'Literata', 'Noto Serif', Georgia, serif;
  --sans:'IBM Plex Sans','Noto Sans', system-ui, sans-serif;
  --mono:'IBM Plex Mono','Noto Sans Mono', ui-monospace, monospace;
}

*{box-sizing:border-box;}
html{-webkit-font-smoothing:antialiased;}

body{
  margin:0;
  background:
    radial-gradient(1200px 800px at 15% -10%, #F4EEDF 0%, transparent 55%),
    var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  line-height:1.6;
}

a{color:inherit;}
::selection{background:var(--gold); color:var(--paper);}

/* locks page scroll while a modal/drawer/sidepanel is open — toggle via JS */
body.scroll-lock{
  overflow:hidden;
  height:100vh;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
}

:focus-visible{outline:2px solid var(--maroon); outline-offset:2px;}

/* ---------- reusable components ---------- */

/* small uppercase label used above page/section titles */
.eyebrow{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--maroon);
  margin:0 0 10px;
}

/* highlighted note / example box, used across any subject page */
.callout{
  background:var(--card);
  border:1px solid var(--line);
  border-left:3px solid var(--forest);
  border-radius:4px;
  padding:14px 16px;
  margin:14px 0 18px;
  font-size:14.5px;
}
.callout strong{color:var(--forest);}

/* small rounded tag/badge, e.g. citation chips, status pills */
.pill{
  display:inline-flex;
  align-items:center;
  font-family:var(--mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:.04em;
  color:var(--maroon-deep);
  background:#F0E4D2;
  border:1px solid var(--gold);
  border-radius:3px;
  padding:2px 8px;
  white-space:nowrap;
}