/* RonanRx Hub — shared design system
   One token layer + shared template chrome (nav, footer, components).
   Page-specific component CSS lives in per-page files that consume these tokens.
   No external requests: fonts are same-origin woff2 in /assets/fonts. */

/* ---------- fonts (self-contained, same-origin, variable) ---------- */
@font-face {
  font-family: "Newsreader";
  src: url("/hub/assets/fonts/newsreader.woff2") format("woff2");
  font-weight: 300 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("/hub/assets/fonts/newsreader-italic.woff2") format("woff2");
  font-weight: 300 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("/hub/assets/fonts/geist.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/hub/assets/fonts/geist-mono.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- tokens ---------- */
:root {
  /* surfaces */
  --paper:          #f6f3ea;
  --surface:        #ffffff;
  --surface-raised: #fffefa;
  --surface-muted:  #fbfaf6;
  --surface-alt:    #eeeadc;
  --surface-dark:   #0c2f10;  /* nav, hero, footer — one dark surface (was 3 greens) */

  /* borders */
  --border-subtle: #ded8c7;
  --border-strong: #c7c3b8;
  --divider:       #e5e0d1;

  /* text */
  --text:       #0c2f10;
  --text-muted: #4a5550;
  --text-on-dark:       #f6f3ea;
  --text-on-dark-muted: #a4c9aa;

  /* brand + interactive */
  --brand:      #0f3e17;
  --brand-soft: #dfe9e0;
  --link:       #0f3e17;
  --link-hover: #1a5a27;
  --sage:       #a4c9aa;
  --mint:       #ebf3e9;

  /* support accents (accent / soft-bg / ink-text / line) */
  --amber: #b97a2e; --amber-soft: #f5ead8; --amber-ink: #5d3b10; --amber-line: #dfc08c;
  --blue:  #2c5566; --blue-soft:  #e4eff3; --blue-line:  #9ebdca;
  --rose:  #cd4e4e; --rose-soft:  #fbefec; --rose-line:  #e7bbb3;

  /* elevation */
  --shadow:    0 14px 40px rgba(12, 47, 16, 0.10);
  --shadow-sm: 0 5px 18px  rgba(12, 47, 16, 0.07);

  /* type */
  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --font-sans:  "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:  "Geist Mono", "SF Mono", Menlo, monospace;

  /* layout */
  --page-max:      1200px;
  --page-wide:     1360px;
  --measure-prose: 68ch;
  --gutter:        clamp(16px, 4vw, 52px);
  --radius:        8px;
  --radius-sm:     6px;
  --radius-pill:   999px;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }

html {
  background: var(--paper);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--font-serif);
  font-size: 1rem;       /* rem for accessibility / user zoom */
  line-height: 1.56;
}

/* opt-in schematic texture — NOT site-wide */
body.bg-grid {
  background:
    linear-gradient(90deg,  rgba(15, 62, 23, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(15, 62, 23, 0.035) 1px, transparent 1px),
    var(--paper);
  background-size: 36px 36px;
}

a { color: var(--link); }
a:hover { color: var(--link-hover); }

img { max-width: 100%; }

h1, h2, h3, h4, p { margin-top: 0; }

h1 {
  margin-bottom: 0.4em;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 1.04;
}
h2 {
  margin-bottom: 0.35em;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.75rem, 3.5vw, 2.125rem);
  line-height: 1.12;
}
h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.25;
}

.lead {
  max-width: var(--measure-prose);
  color: var(--text-muted);
  font-size: 1.1875rem;
  line-height: 1.52;
}

.eyebrow {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 0.75em;
}

code {
  font-family: var(--font-mono);
  font-size: 0.93em;
  background: rgba(15, 62, 23, 0.08);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--brand);
}

:focus-visible {
  outline: 3px solid rgba(164, 201, 170, 0.85);
  outline-offset: 2px;
}

/* ---------- layout primitives ---------- */
.page {
  max-width: var(--page-max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.page.wide { max-width: var(--page-wide); }
.measure { max-width: var(--measure-prose); }

/* ---------- hub nav (shared chrome, class-based, active-aware) ---------- */
.hub-nav {
  position: sticky;
  top: 0;
  z-index: 99999;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  align-items: center;
  background: var(--surface-dark);
  color: #fff;
  font: 600 0.8125rem/1 var(--font-sans);
  padding: 10px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.hub-nav .hub-brand {
  opacity: 0.7;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.hub-nav a {
  color: #fff;
  text-decoration: none;
  padding: 5px 9px;
  border-radius: 5px;
  line-height: 1;
}
.hub-nav a:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.hub-nav a[aria-current="page"] {
  background: var(--paper);
  color: var(--surface-dark);
}
.hub-nav .spacer { flex: 1; }

/* ---------- brand lockup (doc headers) ---------- */
.brand-lockup {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-sans);
  font-weight: 700;
}
.brand-mark {
  width: 34px;
  height: 34px;
  border: 1px solid var(--brand);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--surface);
  background: var(--brand);
  font-family: var(--font-serif);
  font-weight: 600;
}
.brand-sub {
  color: var(--text-muted);
  font: 500 0.75rem/1.4 var(--font-sans);
}

/* ---------- doc meta + pills ---------- */
.doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--font-sans);
  color: var(--text-muted);
  font-size: 0.75rem;
}
.pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.68);
  white-space: nowrap;
}
.pill.status-draft  { border-color: var(--amber-line); background: var(--amber-soft); color: var(--amber); }
.pill.status-review { border-color: var(--blue-line);  background: var(--blue-soft);  color: var(--blue); }
.pill.status-locked { border-color: var(--rose-line);  background: var(--rose-soft);  color: var(--rose); }

/* ---------- buttons ---------- */
.button {
  appearance: none;
  border: 1px solid var(--brand);
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: var(--surface);
  font: 700 0.875rem/1 var(--font-sans);
  min-height: 44px;
  padding: 0 16px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.button:hover { background: var(--link-hover); border-color: var(--link-hover); color: #fff; }
.button.secondary { background: var(--surface); color: var(--brand); }
.button.secondary:hover { background: var(--mint); }
.button.ghost { border-color: var(--border-subtle); background: transparent; color: var(--text); }
.button.ghost:hover { background: rgba(15, 62, 23, 0.06); }

/* ---------- topbar (doc header row) ---------- */
.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid var(--border-subtle);
}

/* ---------- section rhythm ---------- */
.section {
  margin-top: 24px;
  padding-top: 42px;
  border-top: 1px solid var(--border-subtle);
}
.section:first-of-type { border-top: 0; }
.section-heading {
  display: grid;
  grid-template-columns: minmax(0, 0.74fr) minmax(280px, 0.26fr);
  gap: 24px;
  align-items: end;
  margin-bottom: 22px;
}
.section-heading > div p { max-width: var(--measure-prose); margin-bottom: 0; color: var(--text-muted); font-size: 1.0625rem; }
.section-note {
  justify-self: end;
  max-width: 340px;
  padding: 14px 16px;
  border-left: 3px solid var(--amber);
  background: var(--amber-soft);
  color: var(--amber-ink);
  border-radius: 0 var(--radius) var(--radius) 0;
  font: 500 0.8125rem/1.45 var(--font-sans);
}

/* ---------- generic card ---------- */
.card {
  display: block;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 16px 18px;
  text-decoration: none;
  color: var(--text);
}
a.card:hover { border-color: var(--brand); box-shadow: var(--shadow-sm); }
.card .card-title { font: 700 1rem/1.3 var(--font-sans); }
.card .card-desc { color: var(--text-muted); font: 500 0.875rem/1.45 var(--font-sans); margin-top: 4px; }
.card-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; max-width: var(--measure-prose); }

/* ---------- footer (shared chrome) ---------- */
.hub-footer {
  background: var(--surface-dark);
  color: var(--text-on-dark-muted);
  padding: 40px 0;
  margin-top: 56px;
  font: 0.8125rem/1.5 var(--font-mono);
}
.hub-footer .page {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.hub-footer a { color: var(--text-on-dark); }

/* ---------- breadcrumb ---------- */
.crumbs {
  font: 600 0.75rem/1 var(--font-sans);
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 18px 0 0;
}
.crumbs a { color: var(--text-muted); text-decoration: none; }
.crumbs a:hover { color: var(--brand); }
.crumbs span { color: var(--text); }

/* ---------- architecture views (scoped to body.arch: System Map + Agentic Intake) ----------
   Scoped so these never touch other pages that also use .hero (e.g. the waiver's light hero). */
.arch .wrap { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter); }
.arch .hero { background: var(--surface-dark); color: var(--text-on-dark); padding: clamp(40px, 6vw, 64px) 0; }
.arch .hero .w { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter); }
.arch .hero .eyebrow { color: var(--text-on-dark-muted); margin-bottom: 0; }
.arch .hero h1 { color: #fff; font-family: var(--font-serif); font-weight: 400; font-size: clamp(2.2rem, 4.5vw, 3rem); line-height: 1.05; margin: 18px 0 0; }
.arch .hero .sub { color: var(--text-on-dark-muted); font-family: var(--font-mono); font-size: 0.85rem; margin-top: 12px; }
.arch .hero p { color: var(--text-on-dark-muted); font-size: 1.2rem; max-width: 70ch; margin: 14px 0 0; }
.arch .sec { padding: clamp(40px, 6vw, 64px) 0; }
.arch .sec h2 { font-family: var(--font-serif); font-weight: 400; font-size: clamp(1.85rem, 3.2vw, 2.2rem); line-height: 1.12; margin: 0; }
.arch .dek { color: var(--text-muted); font-size: 1.2rem; max-width: var(--measure-prose); margin-top: 10px; }
.arch .eb { color: var(--brand); margin-bottom: 8px; }
.arch .svgwrap { overflow-x: auto; border: 1px solid var(--divider); border-radius: var(--radius-sm); background: var(--paper); padding: 24px; margin-top: 20px; }

/* ---------- responsive base ---------- */
@media (max-width: 760px) {
  body { font-size: 0.9375rem; }
  h1 {
    max-width: 100%;
    overflow-wrap: break-word;
    font-size: clamp(2rem, 10vw, 2.4rem);
  }
  .lead { font-size: 1rem; }
  .hub-nav {
    gap: 4px;
    padding-right: 12px;
    padding-left: 12px;
    font-size: 0.75rem;
  }
  .hub-nav .hub-brand { flex: 0 0 100%; }
  .hub-nav a { padding: 5px 6px; }
  .card-list { max-width: 100%; }
  .topbar, .section-heading { grid-template-columns: 1fr; }
  .topbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 14px;
  }
  .section-note { justify-self: stretch; max-width: none; }
  .hub-footer .page { flex-direction: column; align-items: flex-start; }
}

@media print {
  .hub-nav, .hub-footer { display: none; }
  body, body.bg-grid { background: var(--paper); }
  .section { page-break-inside: avoid; }
}