/* ============================================================
   RIVETT · Design Tokens · v1.0
   Single source of truth. Imported by every page in the system.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700;800&family=DM+Mono:wght@300;400;500&family=Newsreader:ital,wght@0,400;0,500;1,400;1,500&display=swap');

:root {
  /* ---------- Surface ---------- */
  --paper:        #FFFFFF;
  --paper-2:      #F4F2ED;
  --paper-3:      #EBE6DC;
  --paper-4:      #DDD7C9;     /* deepest paper, used for code blocks, table heads */
  --sage:         #E8F0D9;     /* tinted accent surface */
  --sage-2:       #D5E3B7;     /* sage hover/active */

  /* ---------- Ink ---------- */
  --ink:          #0E1A2C;     /* primary type, dark surface bg */
  --ink-2:        #1B2940;     /* dark surface raised */
  --ink-dim:      #3A4658;     /* secondary type, italic serif on light */
  --ink-faint:    #7A8597;     /* meta strip, captions */
  --ink-soft:     #B6BCC6;     /* disabled, dividers on dark */

  /* ---------- On-ink (inverse text) ---------- */
  --on-ink:           #FFFFFF;
  --on-ink-dim:       rgba(255,255,255,0.78);
  --on-ink-italic:    rgba(255,255,255,0.62);
  --on-ink-faint:     rgba(255,255,255,0.55);
  --on-ink-line:      rgba(255,255,255,0.18);
  --on-ink-line-2:    rgba(255,255,255,0.32);

  /* ---------- Lines ---------- */
  --line:         rgba(14,26,44,0.14);
  --line-strong: rgba(14,26,44,0.28);
  --line-soft:   rgba(14,26,44,0.06);

  /* ---------- Accent (the only colour) ---------- */
  --accent:       #8FBF3F;     /* primary green — the dot, hover fills */
  --accent-deep:  #4A6E18;     /* AA on paper — small text, focus rings */
  --accent-bg:    #F2F7E5;     /* sub-sage tint for callout backgrounds */

  /* ---------- Signal (functional, used sparingly) ---------- */
  --signal-warn:  #B8651F;     /* amber-rust — used in MRI risk bars only */
  --signal-halt:  #9A2B2B;     /* deep red — used for halt/decline only */
  /* No success colour — that's the accent. No info colour — that's ink-dim. */

  /* ---------- Type families ---------- */
  --grotesk:      'Inter Tight', system-ui, -apple-system, sans-serif;
  --serif:        'Newsreader', Georgia, 'Times New Roman', serif;
  --mono:         'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- Tracking ---------- */
  --track-mono:       0.22em;
  --track-mono-tight: 0.16em;
  --track-tighter:   -0.03em;
  --track-display:   -0.055em;
  --track-h:         -0.04em;
  --track-h-md:      -0.03em;
  --track-h-sm:      -0.02em;

  /* ---------- Type scale ---------- */
  --t-display:    clamp(56px, 8vw, 124px);
  --t-h-xxl:      clamp(48px, 6vw, 72px);
  --t-h-xl:       clamp(36px, 4.4vw, 48px);
  --t-h-lg:       30px;
  --t-h-md:       22px;
  --t-h-sm:       17px;
  --t-body-xl:    19px;
  --t-body:       16px;
  --t-body-md:    15px;
  --t-body-sm:    13.5px;
  --t-meta:       11px;
  --t-caption:    10.5px;

  /* ---------- Line heights ---------- */
  --lh-display:   0.92;
  --lh-h:         1.05;
  --lh-h-prose:   1.18;
  --lh-body:      1.55;
  --lh-prose:     1.65;
  --lh-tight:     1.25;

  /* ---------- Spacing (4-px base) ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  28px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-14: 56px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-32: 128px;
  --sp-40: 160px;

  /* ---------- Radii ---------- */
  --r-0:    0;          /* default */
  --r-sm:   2px;        /* tiny chrome only — checkbox, tag */
  --r-pill: 999px;      /* the dot, pills */

  /* ---------- Border weights ---------- */
  --bw-hair:  1px;
  --bw-rule:  2px;      /* focus ring, emphasised under-rules */
  --bw-thick: 3px;      /* numbox left rail */

  /* ---------- Layout ---------- */
  --page-max:       1240px;
  --page-max-prose: 720px;
  --page-pad:       56px;
  --page-pad-sm:    24px;
  --col-gap:        24px;
  --grid-12:        repeat(12, minmax(0, 1fr));

  /* ---------- Motion ---------- */
  --ease:        cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --dur-1:  120ms;     /* colour swaps */
  --dur-2:  200ms;     /* expanders, marker rotation */
  --dur-3:  320ms;     /* page-level, rare */
  --dur-4:  500ms;     /* MRI bar fills, reserved */

  /* ---------- Elevation (almost none) ---------- */
  --shadow-0: none;
  --shadow-1: 0 1px 0 rgba(14,26,44,0.04);              /* card press */
  --shadow-2: 0 8px 24px -10px rgba(14,26,44,0.18);     /* modal — only allowed elevation */

  /* ---------- Z layers ---------- */
  --z-base:    1;
  --z-sticky:  10;
  --z-overlay: 100;
  --z-modal:   200;
  --z-toast:   300;
}

/* ============================================================
   Base resets — applied site-wide
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--grotesk);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--ink); color: var(--on-ink); }

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; cursor: pointer; }

img, svg { display: block; max-width: 100%; }

/* Focus — accent-deep on light, accent on dark, never removed */
:focus { outline: none; }
:focus-visible {
  outline: var(--bw-rule) solid var(--accent-deep);
  outline-offset: 2px;
}
.on-ink :focus-visible {
  outline-color: var(--accent);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   Page chrome — used by every system page
   ============================================================ */

.page {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-pad);
}
@media (max-width: 780px) {
  .page { padding: 0 var(--page-pad-sm); }
}

.system-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-7) 0 var(--sp-8);
  border-bottom: var(--bw-hair) solid var(--line);
  flex-wrap: wrap;
  gap: var(--sp-4);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.12em;
  font-family: var(--grotesk);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--ink);
}
.wordmark .dot-mark {
  display: inline-block;
  width: 0.32em;
  height: 0.32em;
  border-radius: var(--r-pill);
  background: var(--accent);
  transform: translateY(0.04em);
}
.wordmark--sm { font-size: 18px; }

.system-nav .meta {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--ink-faint);
  display: flex;
  gap: var(--sp-8);
  flex-wrap: wrap;
}
.system-nav .meta b { color: var(--ink); font-weight: 500; }
.system-nav .meta a:hover { color: var(--accent-deep); }

/* Top page banner — site-wide variant of "you are reading the system" */
.system-banner {
  background: var(--paper-2);
  padding: var(--sp-3) var(--sp-6);
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--ink-faint);
  border-bottom: var(--bw-hair) solid var(--line);
}
.system-banner b { color: var(--ink); font-weight: 500; }

/* Breadcrumb of system sections */
.system-bread {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--ink-faint);
  display: flex;
  gap: var(--sp-3);
  align-items: center;
  margin-top: var(--sp-12);
}
.system-bread a:hover { color: var(--accent-deep); }
.system-bread .sep { color: var(--ink-faint); }
.system-bread b { color: var(--ink); font-weight: 500; }

/* Section scaffold — used by every spec page */
section.spec {
  padding: var(--sp-20) 0;
  border-bottom: var(--bw-hair) solid var(--line-strong);
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 64px;
}
@media (max-width: 980px) {
  section.spec { grid-template-columns: 1fr; gap: var(--sp-8); padding: var(--sp-14) 0; }
}
section.spec > .label {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--ink-faint);
  align-self: start;
  position: sticky;
  top: var(--sp-8);
}
section.spec > .label .num {
  display: block;
  font-family: var(--grotesk);
  font-weight: 700;
  font-size: 56px;
  letter-spacing: var(--track-tighter);
  color: var(--ink);
  line-height: 1;
  margin-top: var(--sp-3);
}
section.spec > .body { min-width: 0; }

section.spec h2 {
  font-family: var(--grotesk);
  font-weight: 700;
  font-size: var(--t-h-xl);
  line-height: var(--lh-h);
  letter-spacing: var(--track-h);
  margin: 0 0 var(--sp-3);
  text-wrap: balance;
}
section.spec h2 .ital,
section.spec h1 .ital,
.ital {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--ink-dim);
  letter-spacing: -0.02em;
}

section.spec .lede {
  font-family: var(--serif);
  font-style: italic;
  font-size: 21px;
  line-height: 1.45;
  color: var(--ink-dim);
  max-width: 680px;
  margin: 0 0 var(--sp-10);
  text-wrap: pretty;
}

section.spec h3 {
  font-family: var(--grotesk);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
  margin: var(--sp-12) 0 var(--sp-5);
  color: var(--ink);
}
section.spec h3:first-of-type { margin-top: var(--sp-8); }

/* ============================================================
   Stamp — the canonical mono label
   ============================================================ */
.stamp {
  font-family: var(--mono);
  font-size: var(--t-meta);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--accent-deep);
  display: inline-flex;
  align-items: center;
}
.stamp::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: var(--r-pill);
  margin-right: 12px;
  flex-shrink: 0;
}
.stamp--neutral { color: var(--ink-faint); }
.stamp--neutral::before { background: var(--ink-faint); }
.stamp--sm { font-size: 10.5px; }
.stamp--sm::before { width: 6px; height: 6px; margin-right: 8px; }
.stamp--ink { color: var(--ink); }
.stamp--on-ink { color: var(--on-ink-faint); }

/* ============================================================
   Footer — system pages
   ============================================================ */
footer.system-foot {
  padding: var(--sp-10) 0 var(--sp-14);
  border-top: var(--bw-hair) solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: var(--t-caption);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--ink-faint);
  flex-wrap: wrap;
  gap: var(--sp-4);
}
footer.system-foot .wordmark { font-size: 14px; }
footer.system-foot a:hover { color: var(--accent-deep); }

/* ============================================================
   Inline code — shared
   ============================================================ */
code, .code {
  font-family: var(--mono);
  font-size: 13px;
  background: var(--paper-3);
  padding: 1px 6px;
  color: var(--ink);
}
.on-ink code { background: var(--ink-2); color: var(--on-ink); }

/* ============================================================
   Hairline rule
   ============================================================ */
hr.rule { border: 0; border-top: var(--bw-hair) solid var(--line); margin: var(--sp-12) 0; }
hr.rule--strong { border-top-color: var(--line-strong); }

/* ============================================================
   Body text utilities
   ============================================================ */
.body-xl { font-size: var(--t-body-xl); line-height: var(--lh-prose); max-width: 600px; }
.body-md { font-size: var(--t-body-md); line-height: var(--lh-body); color: var(--ink-dim); max-width: 560px; }
.body-md--ink { color: var(--ink); }
.serif-it { font-family: var(--serif); font-style: italic; font-size: 21px; line-height: 1.45; color: var(--ink-dim); max-width: 560px; }
.mono-lbl { font-family: var(--mono); font-size: var(--t-meta); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--accent-deep); }

/* ============================================================
   On-ink section helper
   ============================================================ */
.on-ink {
  background: var(--ink);
  color: var(--on-ink);
}
.on-ink h1, .on-ink h2, .on-ink h3, .on-ink h4 { color: var(--on-ink); }
.on-ink .lede { color: var(--on-ink-italic); }
.on-ink .body-md { color: var(--on-ink-dim); }