/* ============================================================
   Shared design tokens + resets used across every section.
   Section-specific styles live in css/sections/*.css
   ============================================================ */
:root{
  --ink:#12161B;
  --ink-2:#1B2128;
  --ink-3:#242B33;
  --paper:#EDE6D6;
  --paper-dim:#D9D0B8;
  --paper-line: rgba(33,28,21,0.14);
  --brass:#B98B4E;
  --brass-bright:#D9A860;
  --text-light:#EDE6D6;
  --text-strong:#EDE6D6;
  --text-dim:#D9D0B8;
  --muted:#8A8F97;
  --text-dark:#211C15;
  --text-dark-muted:#4a4436;
  --header-bg: rgba(18,22,27,0.92);
  --diag-opt-hover-bg:#171C22;
  --diag-opt-selected-bg:#1E2128;
  --exposed:#A6483C;
  --fragile:#B98B4E;
  --stable:#4A7A6E;
  --strength:#C9A227;
  --wine:#7A1F2B;
  --wine-bright:#E15C74;
  --serif: 'Fraunces', serif;
  --sans: 'IBM Plex Sans', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
  --container: 1080px;
}

/* Light theme — flips the "ink" family (dark section backgrounds + light
   text) to a bright warm palette while "paper" sections (already light)
   stay put. See js/theme.js for the toggle that sets this attribute. */
:root[data-theme="light"]{
  --ink:#F7F3E9;
  --ink-2:#EFE8D6;
  --ink-3:#DCD0AE;
  --text-light:#2A2118;
  --text-strong:#181410;
  --text-dim:#5C5238;
  --muted:#6B6455;
  --brass-bright:#8A5A1E;
  --header-bg: rgba(247,243,233,0.92);
  --diag-opt-hover-bg:#EFE7D2;
  --diag-opt-selected-bg:#E7DBB8;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ margin:0; padding:0; }
body{
  background:var(--ink);
  color:var(--text-light);
  font-family:var(--sans);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

body, .section, #site-header, .diag-card, .diag-opt, .service-card, .service-detail{
  transition:background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
h1,h2,h3{ font-family:var(--serif); font-weight:500; margin:0; }
p{ margin:0; }

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
}

.section{ padding:96px 0; }
.section-dark{ background:var(--ink); color:var(--text-light); }
.section-ink2{ background:var(--ink-2); color:var(--text-light); }
.section-paper{ background:var(--paper); color:var(--text-dark); }

.eyebrow{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--brass-bright);
  margin:0 0 14px 0;
  display:flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:'';
  width:6px;height:6px;
  background:var(--brass-bright);
  border-radius:50%;
  display:inline-block;
  flex:0 0 auto;
}
.section-paper .eyebrow{ color:#7A5A2A; }
.section-paper .eyebrow::before{ background:#7A5A2A; }

/* ---- buttons (shared across sections) ---- */
.btn{
  font-family:var(--mono);
  font-size:12.5px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  background:var(--brass);
  color:#151311;
  border:none;
  padding:14px 26px;
  cursor:pointer;
  border-radius:1px;
  display:inline-block;
  text-decoration:none;
  transition:background 0.15s ease;
}
.btn:hover{ background:var(--brass-bright); }
.btn:focus-visible{ outline:2px solid var(--text-strong); outline-offset:3px; }

.btn-ghost{
  background:transparent;
  color:var(--text-dim);
  border:1px solid var(--ink-3);
}
.btn-ghost:hover{ border-color:var(--brass); color:var(--brass-bright); background:transparent; }

.btn-dark{
  background:var(--text-dark);
  color:var(--paper);
  border:1px solid var(--text-dark);
}
.btn-dark:hover{ background:transparent; color:var(--text-dark); }

.btn-outline-dark{
  background:transparent;
  color:var(--text-dark);
  border:1px solid var(--text-dark);
}
.btn-outline-dark:hover{ background:var(--text-dark); color:var(--paper); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .btn, .opt, .progress-fill{ transition:none; }
}

@media (max-width:640px){
  .section{ padding:64px 0; }
}