/* ─────────────────────────────────────────────────────────────────────
   Runbook Design System v2 — "The Ledger", built on USWDS
   System tokens are verbatim USWDS 3.13 color ramps (green-cool,
   gray-warm, gold, red-warm, cyan); theme tokens follow the USWDS
   role model (primary / base / accent-warm / states); component
   anatomy (alerts, buttons, focus) follows USWDS specs. The Ledger
   identity — ledger green, warm paper, vermillion seal (USWDS
   red-warm-50v), double-rule wordmark — is the theme on top.
   Type: Public Sans (the USWDS face) + IBM Plex Mono numerals.
   ───────────────────────────────────────────────────────────────────── */

/* Type loading
   ─────────────────────────────────────────────────────────────────────
   • Public Sans (sans) — loaded from Google Fonts in the page head;
     open source (SIL OFL), the USWDS typeface. Inter remains self-hosted
     as fallback (/assets/inter, SIL OFL 1.1).
   • IBM Plex Mono (numerals) — self-hosted .woff2 in /assets/ibm-plex-mono.
     Light 300, Regular 400, Bold 700, plus Italic 400. Source: IBM/plex
     under SIL OFL 1.1 (see assets/ibm-plex-mono/OFL.txt). */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/inter/Inter-VariableFont_slnt,wght.ttf") format("truetype-variations");
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../assets/ibm-plex-mono/IBMPlexMono-Light.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/ibm-plex-mono/IBMPlexMono-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/ibm-plex-mono/IBMPlexMono-Italic.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../assets/ibm-plex-mono/IBMPlexMono-Bold.woff2") format("woff2");
}

/* ── BEGIN GENERATED — npm run tokens in app/; do not edit by hand ── */
:root {
  /* ── USWDS system tokens (from @uswds/uswds, Ledger selection) ──────── */
  --green-cool-5: #ecf3ec;
  --green-cool-10: #dbebde;
  --green-cool-20: #b4d0b9;
  --green-cool-30: #86b98e;
  --green-cool-40: #5e9f69;
  --green-cool-50: #4d8055;
  --green-cool-60: #446443;
  --green-cool-70: #37493b;
  --green-cool-80: #28312a;
  --green-cool-90: #1a1f1a;
  --green-cool-30v: #21c834;
  --green-cool-40v: #00a91c;
  --green-cool-50v: #008817;
  --green-cool-60v: #216e1f;
  --gray-warm-2: #f9f9f7;
  --gray-warm-4: #f5f5f0;
  --gray-warm-5: #f0f0ec;
  --gray-warm-10: #e6e6e2;
  --gray-warm-20: #cac9c0;
  --gray-warm-30: #afaea2;
  --gray-warm-40: #929285;
  --gray-warm-50: #76766a;
  --gray-warm-60: #5d5d52;
  --gray-warm-70: #454540;
  --gray-warm-90: #171716;
  --gold-5v: #fef0c8;
  --gold-20v: #ffbe2e;
  --gold-40v: #c2850c;
  --gold-60v: #7a591a;
  --red-warm-50v: #d54309;
  --red-warm-60v: #9c3d10;
  --cyan-5: #e7f6f8;
  --cyan-30: #5dc0d1;
  --cyan-40: #449dac;
  --cyan-50: #168092;
  --cyan-30v: #00bde3;
  --blue-40v: #2491ff;
  /* ── USWDS theme tokens (Runbook's Ledger theme) ───────────────────── */
  --color-primary-lighter: #dbebde;
  --color-primary-light: #86b98e;
  --color-primary: #4d8055;
  --color-primary-dark: #446443;
  --color-primary-darker: #37493b;
  --color-base-lightest: #f9f9f7;
  --color-base-lighter: #e6e6e2;
  --color-base-light: #afaea2;
  --color-base: #76766a;
  --color-base-dark: #5d5d52;
  --color-base-darker: #454540;
  --color-ink: #171716;
  --color-accent-warm: #c2850c;
  --color-secondary: #d54309; /* the seal */
  --color-success: #00a91c;
  /* the work is proven: clean run, sealed, balances — never money, never marketing */
  --color-verified: #156e50;
  --color-warning: #ffbe2e;
  --color-error: #d54309;
  --color-info: #00bde3;
  /* focus is a setting, not a palette role — keep in step with
     $theme-color-focus in ledger-theme.scss */
  --color-focus: #2491ff;
}
/* ── END GENERATED ── */

:root {
  /* ── Legacy aliases (component compatibility) ──────────────────────── */
  --paper:        var(--color-base-lightest);
  --ink-navy:     var(--color-primary-darker);   /* primary ink is ledger green */
  --gray:         var(--color-base);
  --divider:      var(--color-base-lighter);
  --seal:         var(--color-secondary);
  --seal-600:     var(--red-warm-60v);
  --emerald:      var(--green-cool-50v);
  --emerald-600:  var(--green-cool-60v);
  --emerald-400:  var(--green-cool-30v);
  --forest:       var(--green-cool-80);
  --amber:        var(--gold-40v);
  --amber-600:    var(--gold-60v);
  --amber-400:    var(--gold-20v);
  --teal-700:     var(--cyan-50);
  --teal-600:     var(--cyan-40);
  --teal-500:     var(--cyan-30);
  --red-700:      var(--red-warm-60v);
  --red-600:      var(--red-warm-50v);
  --navy-900:     var(--green-cool-90);
  --navy-800:     var(--green-cool-80);
  --navy-700:     var(--green-cool-70);
  --navy-600:     var(--green-cool-60);
  --slate-100:    var(--gray-warm-4);
  --slate-200:    var(--gray-warm-10);
  --slate-300:    var(--gray-warm-20);
  --slate-400:    var(--gray-warm-30);
  --slate-500:    var(--gray-warm-50);
  --slate-600:    var(--gray-warm-60);
  --slate-700:    var(--gray-warm-70);

  /* ── USWDS spacing units (8px grid) ────────────────────────────────── */
  --units-05: 4px;
  --units-1:  8px;
  --units-105: 12px;
  --units-2:  16px;
  --units-205: 20px;
  --units-3:  24px;
  --units-4:  32px;
  --units-5:  40px;
  --units-6:  48px;

  /* ── Semantic foreground / background tokens ───────────────────────── */
  --bg:           var(--paper);
  --bg-elevated: #FFFFFF;
  --fg:           var(--ink-navy);
  --fg-secondary: var(--slate-600);
  --fg-muted:     var(--slate-500);
  --fg-on-dark:   #FFFFFF;
  --border:       var(--slate-300);
  --border-strong:var(--slate-400);

  /* ── Type families ─────────────────────────────────────────────────── */
  --font-sans: "Public Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "JetBrains Mono", "Fira Code", monospace;

  /* ── Type scale (root 17px per app theme) ──────────────────────────── */
  --text-xs:    0.75rem;    /* 12.75px — micro labels, badges */
  --text-sm:    0.875rem;   /* 14.875px — metadata, captions */
  --text-base:  1rem;       /* 17px — body */
  --text-lg:    1.125rem;   /* 19.125px — h3 / lead body */
  --text-xl:    1.25rem;    /* 21.25px — h2 */
  --text-2xl:   1.5rem;     /* 25.5px — h1 in-app */
  --text-3xl:   2rem;       /* 34px — section headings */
  --text-hero:  3rem;       /* 51px — landing hero */
  --text-score: 3.5rem;     /* 59.5px — Fairness Score numeral */

  /* ── Tracking / leading ────────────────────────────────────────────── */
  --tracking-display: -0.025em;  /* Inter Bold display headlines */
  --tracking-tight:   -0.015em;
  --tracking-normal:   0;
  --tracking-wide:     0.04em;   /* Uppercase eyebrow labels */
  --leading-tight:     1.15;
  --leading-snug:      1.3;
  --leading-normal:    1.5;
  --leading-relaxed:   1.65;

  /* ── Weights ───────────────────────────────────────────────────────── */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-bold:    700;

  /* ── Radii ─────────────────────────────────────────────────────────── */
  --radius-sm: 4px;
  --radius:    8px;          /* Default cards, buttons */
  --radius-lg: 12px;
  --radius-pill: 9999px;

  /* ── Elevation ─────────────────────────────────────────────────────── */
  --shadow-card:  0 1px 3px 0 rgb(0 0 0 / 0.10), 0 1px 2px -1px rgb(0 0 0 / 0.10);
  --shadow-hover: 0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.10);
  --shadow-modal: 0 20px 25px -5px rgb(0 0 0 / 0.10), 0 8px 10px -6px rgb(0 0 0 / 0.10);

  /* ── Spacing scale (4px base) ──────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
}

/* ─── Semantic element styles ────────────────────────────────────────── */

html { font-size: 17px; }

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--fg);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

h1, .h1 {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--text-hero);
  line-height: 1.1;
  letter-spacing: var(--tracking-display);
  color: var(--ink-navy);
}

h2, .h2 {
  font-weight: var(--weight-bold);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--ink-navy);
}

h3, .h3 {
  font-weight: var(--weight-semi);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--ink-navy);
}

h4, .h4 {
  font-weight: var(--weight-semi);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--ink-navy);
}

p, .body {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--ink-navy);
  text-wrap: pretty;
}

.lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--slate-700);
}

small, .meta {
  font-size: var(--text-sm);
  color: var(--gray);
  line-height: var(--leading-normal);
}

.eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--gray);
}

.numeral, code {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1, "ss01" 1;
}

a {
  color: var(--ink-navy);
  text-decoration: underline;
  text-decoration-color: var(--slate-300);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 120ms ease;
}
a:hover {
  text-decoration-color: var(--emerald);
}

hr {
  border: 0;
  border-top: 1px solid var(--divider);
  margin: var(--space-8) 0;
}

/* USWDS focus indicator: 0.25rem solid focus-blue on every focusable
   element — the single highest-value accessibility convention in USWDS. */
:focus-visible {
  outline: 0.25rem solid var(--color-focus);
  outline-offset: 0;
}

/* USWDS skipnav: invisible until focused, then a clear jump link. */
.rb-skipnav {
  position: absolute;
  top: -100px;
  left: 0;
  z-index: 100;
  background: #fff;
  color: var(--color-primary-darker);
  padding: 0.75rem 1.25rem;
  font-weight: 700;
  font-size: var(--text-sm);
  text-decoration: none;
  transition: top 120ms ease;
}
.rb-skipnav:focus {
  top: 0;
}