/* QuestWorks Design System — generated from tokens.json */
:root, [data-theme="light"] {
  --bg: #ffffff; /* Page and section background. Ground for body text in ink and ink-2. Swap: the page ground is the brand gradient (117°, #1F7FC7 to #6BAFE0), drawn by bundle.css; this solid is only its fallback; never paint a flat blue ground. */
  --bg-alt: #f5faff; /* Alternate section background, for a second band of content. */
  --wash: #ecf6ff; /* Soft wash behind a featured block or the announcement banner. */
  --surface: #ffffff; /* Cards, tiles, inputs and every raised surface. Separated from bg by a line, never a shadow. Swap: white glass, so the gradient shows through every card. */
  --surface-2: #f3f8fd; /* Bar tracks, empty states inside a card, quiet fills. */
  --ink: #292929; /* Body copy and plain numbers on bg, bg-alt and surface (14.5:1 light, 13:1 dark). Swap: white on the gradient measures 3.4:1 to 4.4:1. Use swap for heroes, CTAs, stat bands and short copy at 18px and up, not long-form text. */
  --ink-2: #4e5a6b; /* Secondary copy and bylines on bg and surface (7.4:1 light, 8.4:1 dark). */
  --ink-3: #8a94a3; /* Captions, small labels and placeholders on bg and surface. Light theme measures 3.0:1: use it only for text 18px and up or for non-essential hints; dark measures 4.6:1. */
  --head: #296590; /* Headings in solid ink, before their gradient key phrase (5.5:1 on white). */
  --line: #e2ebf4; /* Hairlines between rows, card borders, dividers. The only separator: no shadows. */
  --line-2: #cfddea; /* Stronger lines: control borders, empty bar outlines, tab outlines. */
  --core: #3079ae; /* Brand blue: the start of every gradient, focus rings, selected states. As text it measures 3.4:1 on white, so set links 18px and up or underline them. Swap: what was blue becomes white (links, focus rings, selected states). */
  --core-ink: #227bbe; /* Blue text on alice tints (Coming soon tags, chips). */
  --sky: #7abded; /* Sky blue: only ever the END of a gradient that starts at core. Never alone: not as a fill, text color, border, stroke, dot, avatar disc, wash or backdrop. A blue ground or band is always the gradient (117°, core to sky; swap #1F7FC7 to #6BAFE0), never a flat blue. */
  --alice: #e3f3ff; /* Tints: icon wells, chips, hover fills. */
  --navy: #1e4e70; /* Dark band behind logos in white. Swap: text on white buttons and chips. */
  --strained: #e4605b; /* Band color for scores under 60: bars, segments, dice faces of 1. Never text on white; use strained-ink. */
  --forming: #e8863b; /* Band color for 60 to 74: bars, segments, dice faces of 2 and 3. */
  --developing: #ebc05a; /* Band color for 75 to 84, a soft gold: bars, segments, dice faces of 4 and 5. Text on it is #5A4210. */
  --performing: #3079ae; /* Band color for 85 to 94: bars and the gauge draw it as the brand gradient, core to sky. Swap: white, a full bar on a translucent white track. */
  --thriving: #1f7fc7; /* Band color for 95 and up: the deepest saturated brand blue, a step past Performing (never navy, never indigo). Bars and the gauge draw it as a gradient, #176BBA to core. No green and no navy in the score system. */
  --strained-ink: #c93d37; /* Text for the Strained band: its band word and the score number (5.0:1 on white, 6.2:1 on surface dark). */
  --forming-ink: #b85f17; /* Text for the Forming band (4.5:1 on white, 7.5:1 dark). */
  --developing-ink: #94690c; /* Text for the Developing band (4.9:1 on white, 8.8:1 dark). */
  --performing-ink: #1f74b8; /* Text for the Performing band (4.9:1 on white, 6.9:1 dark). */
  --thriving-ink: #176bba; /* Text for the Thriving band: its band word and the score number (5.5:1 on white). */
}
[data-theme="swap"] {
  --bg: #3079ae;
  --bg-alt: #2584cb;
  --wash: rgba(255,255,255,0.12);
  --surface: rgba(255,255,255,0.12);
  --surface-2: rgba(255,255,255,0.22);
  --ink: #ffffff;
  --ink-2: rgba(255,255,255,0.88);
  --ink-3: rgba(255,255,255,0.74);
  --head: #ffffff;
  --line: rgba(255,255,255,0.28);
  --line-2: rgba(255,255,255,0.45);
  --core: #ffffff;
  --core-ink: #ffffff;
  --sky: #ffffff;
  --alice: rgba(255,255,255,0.16);
  --navy: #1e4e70;
  --strained: #ff8e89;
  --forming: #ffaa66;
  --developing: #ffd66e;
  --performing: #ffffff;
  --thriving: #ffffff;
  --strained-ink: #ffe3e1;
  --forming-ink: #ffe6d1;
  --developing-ink: #fff1c7;
  --performing-ink: #ffffff;
  --thriving-ink: #ffffff;
}
:root {
  --space-1: 4px; /* Hairline gaps between chips. */
  --space-2: 8px; /* Gap between buttons and tags. */
  --space-3: 12px; /* Gap between cards in a grid. */
  --space-4: 16px; /* Card gaps, small card padding. */
  --space-5: 24px; /* Card padding, gap between a heading and its body. */
  --space-6: 32px; /* Gap between groups inside a section. */
  --space-7: 48px; /* Space between columns of a two-column module. */
  --space-8: 56px; /* Module padding on desktop (32px on phones). */
  --space-9: 96px; /* Section padding on long pages. */
  --radius-sm: 8px; /* Small marks: dice, tags inside tables. */
  --radius-control: 10px; /* Buttons, inputs, directory cards, icon wells. */
  --radius-md: 12px; /* Narrator bar, rows of chips, small cards. */
  --radius-lg: 16px; /* Cards, tiles, document previews. */
  --radius-xl: 22px; /* Bento tiles. */
  --radius-pill: 999px; /* Tabs, chips, tags, bar tracks. */
  --radius-circle: 50%; /* Avatars, dots, the gauge. */
  --font-sans: "League Spartan", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --text-display: 400 64px/1.02 var(--font-sans); /* The hero headline only. Regular weight; the key phrase carries the gradient. */
  --text-h2: 400 40px/1.1 var(--font-sans); /* Section headlines. Solid head ink with one gradient key phrase. */
  --text-h3: 400 22px/1.25 var(--font-sans); /* Card and tile titles. */
  --text-lead: 400 20px/1.5 var(--font-sans); /* The one line under a headline, in ink-2. */
  --text-body: 400 17px/1.55 var(--font-sans); /* All running copy, in ink. */
  --text-small: 400 14px/1.45 var(--font-sans); /* Bylines, captions, meta lines. */
  --text-eyebrow: 400 12px/1.4 var(--font-sans); /* Uppercase labels above a headline, in the text gradient. Never bold. */
  --text-numeral: 200 88px/0.9 var(--font-sans); /* A score or headline figure. A score's own number takes its band ink; other figures take ink. */
  --text-label-mono: 400 12px/1.4 var(--font-mono); /* Labels, timestamps, step numbers, side labels and tags, in caps (class qm-mono). The second voice next to League Spartan; never for headings or body copy. */
}
.display {
  font-family: var(--font-sans);
  font-size: 64px;
  line-height: 1.02;
  font-weight: 400;
  letter-spacing: -0.025em;
}
.h2 {
  font-family: var(--font-sans);
  font-size: 40px;
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.h3 {
  font-family: var(--font-sans);
  font-size: 22px;
  line-height: 1.25;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.lead {
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0;
}
.body {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: 0;
}
.small {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.45;
  font-weight: 400;
  letter-spacing: 0;
}
.eyebrow {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0.12em;
}
.numeral {
  font-family: var(--font-sans);
  font-size: 88px;
  line-height: 0.9;
  font-weight: 200;
  letter-spacing: -0.05em;
}
.label-mono {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0.08em;
}
/* The variable-font @font-face that was here pointed at a file this site does not ship. auth.css declares the
   400 face; play.css declares the 200 numerals face. */