/* StopWarden design tokens, v3. THE palette file: a palette swap is an edit to the "brand primitives" block only.
   Palette A, Night Watch (business/creative/brand/v2/BRAND.md). Every other stylesheet reads the semantic roles
   below, never a hex. Contrast ratios (WCAG 2) are noted where a role carries text. */

@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/assets/fonts/barlow-semi-condensed-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Semi Condensed"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/fonts/barlow-semi-condensed-700.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/barlow-500.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/assets/fonts/barlow-600.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/assets/fonts/jetbrains-mono-var.woff2") format("woff2"); }
/* Metric-matched fallbacks, so the swap from the system face to Barlow does not move the layout. */
@font-face { font-family: "Barlow fallback"; src: local("Arial"); size-adjust: 91%; ascent-override: 105%;
  descent-override: 21%; line-gap-override: 0%; }
@font-face { font-family: "Barlow SC fallback"; src: local("Arial Narrow"), local("Arial"); size-adjust: 88%;
  ascent-override: 110%; descent-override: 22%; line-gap-override: 0%; }

:root {
  /* ---- brand primitives (swap here) ------------------------------------------------------------------------ */
  --c-night: #0D1730;        /* the ground when nobody is watching */
  --c-night-2: #132046;      /* raised night: bands, table heads */
  --c-watch: #1F3B7A;        /* Watch Blue, the brand */
  --c-paper: #F2EEE5;        /* Chart Paper, the daylight ground */
  --c-paper-2: #E8E2D5;      /* raised paper: code, table heads */
  --c-ink: #111A2E;          /* Night Ink: text on paper, 15.0:1 */
  --c-ink-2: #3A4358;        /* secondary text on paper, 8.5:1 */
  --c-ink-3: #475069;        /* captions on paper, 6.9:1 (6.2:1 on paper-2); v7: was #56607A, 5.4:1 / 4.9:1 */
  --c-chalk: #F2EEE5;        /* text on night, 15.3:1 */
  --c-chalk-1: #DCE0EB;      /* v7: body text on Watch Blue (lede, hero lines), 8.1:1; frontier subhead median 8.3:1 */
  --c-chalk-2: #BCC4D8;      /* secondary on night, 10.2:1; on Watch Blue 6.1:1 */
  --c-chalk-3: #9AA5C2;      /* captions on night, 7.2:1 */
  --c-lamp: #F4B740;         /* the one light: primary action, the time marker. Never text on paper */
  --c-lamp-hi: #F7C664;      /* lamp, hovered */
  --c-lamp-deep: #B8740F;    /* the lamp at 32 px or smaller on paper (marks only) */
  --c-stop: #E0452E;         /* state: a position with no stop. Fills and marks */
  --c-stop-on-night: #F26A52;/* the same state as text on night, 5.3:1 */
  --c-stop-on-paper: #B8321E;/* the same state as text on paper, 5.2:1 */
  --c-clear: #3C9B73;        /* state: protected. Fills and marks */
  --c-clear-on-paper: #2C7A59;
  --c-line-night: #2A3A63;   /* hairlines on night */
  --c-line-night-2: #3B4C7A;
  --c-line-paper: #CFC7B5;   /* hairlines on paper */
  --c-line-paper-2: #B3AA95;
  --c-capture-white: #FFFFFF;/* the NT8 window's own white, used only to mask a row inside a capture */

  /* ---- semantic roles (read these) ------------------------------------------------------------------------- */
  --bg: var(--c-paper);
  --bg-2: var(--c-paper-2);
  --fg: var(--c-ink);
  --fg-2: var(--c-ink-2);
  --fg-3: var(--c-ink-3);
  --line: var(--c-line-paper);
  --line-2: var(--c-line-paper-2);
  --state-stop: var(--c-stop-on-paper);
  --state-clear: var(--c-clear-on-paper);
  --focus: var(--c-ink);
  --link-deco: var(--c-line-paper-2);

  /* ---- type ------------------------------------------------------------------------------------------------ */
  --ff-display: "Barlow Semi Condensed", "Barlow SC fallback", "Arial Narrow", sans-serif;
  --ff-text: "Barlow", "Barlow fallback", Arial, sans-serif;
  --ff-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  /* One type scale, five steps that each differ by >= 1.25x: display 60, statement 60, h2 46, title 28, lede 20,
     then body 17 and small 15. Micro (13) is for the footer and table sub-labels only. */
  --fs-display: clamp(2.625rem, 1.6rem + 2.6vw, 3.75rem);  /* 42 to 60 */
  --fs-statement: clamp(2.375rem, 1.3rem + 2.9vw, 3.75rem); /* 38 to 60 */
  --fs-h2: clamp(2rem, 1.5rem + 1.5vw, 2.875rem);         /* 32 to 46 */
  --fs-h3: 1.3125rem;                                     /* 21: text-face h3 in docs and steps */
  --fs-title: clamp(1.5rem, 1.25rem + 0.6vw, 1.75rem);     /* 24 to 28: display-face titles inside a section */
  --fs-lede: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);   /* 18 to 20 */
  --fs-body: 1.0625rem;                                   /* 17 */
  --fs-small: 0.9375rem;                                  /* 15 */
  --fs-micro: 0.8125rem;                                  /* 13 */
  --fs-mono: 0.84375rem;                                  /* 13.5 */

  /* ---- space (neighbours differ by >= 25 %) ---------------------------------------------------------------- */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --s10: 128px; --s11: 160px;
  --gutter: clamp(20px, 5vw, 40px);  /* v7: 16 -> 20 px on phones (frontier phone left edge median 24 px) */
  --max: 1240px;
  --measure: 66ch;

  /* ---- shape, depth, motion -------------------------------------------------------------------------------- */
  --r-control: 3px;
  --r-frame: 6px;
  --r-inner: 3px;                /* frame radius minus its 3 px bezel */
  --shadow-window: 0 24px 48px -16px rgb(4 9 22 / 0.7), 0 2px 6px rgb(4 9 22 / 0.4);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);        /* Emil Kowalski's strong ease-out */
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --t-press: 160ms;
  --t-ui: 180ms;
}

/* Regions where nobody is watching: header, footer, hero bands. */
.night {
  --bg: var(--c-night);
  --bg-2: var(--c-night-2);
  --fg: var(--c-chalk);
  --fg-2: var(--c-chalk-2);
  --fg-3: var(--c-chalk-3);
  --line: var(--c-line-night);
  --line-2: var(--c-line-night-2);
  --state-stop: var(--c-stop-on-night);
  --state-clear: var(--c-clear);
  --focus: var(--c-lamp);
  --link-deco: var(--c-line-night-2);
  color-scheme: dark;
}
.watch {
  --bg: var(--c-watch);
  --bg-2: #1A3269;
  --fg: var(--c-chalk);
  --fg-2: var(--c-chalk-2);
  --fg-3: var(--c-chalk-2);
  --line: #34528F;
  --line-2: #4A67A3;
  --state-stop: var(--c-stop-on-night);
  --focus: var(--c-lamp);
  --link-deco: #5B78B3;
  color-scheme: dark;
}