/* GENERATED by tools/generate-brand-tokens.py from design/brand/tokens/design-tokens.json — do not hand-edit. Edit design-tokens.json, run `python3 tools/generate-brand-tokens.py`, and commit all three outputs (this block, design/brand/tokens/postmq-tokens.css, src/PostMQ.Web/wwwroot/css/postmq-tokens.css — the last two are this block as a file, byte-identical). `--check` fails on drift; BrandTokenGeneratorTests in tests/PostMQ.Tooling.Tests runs it. Groups without a CSS mapping (font.size, space, radius, shadow, motion.*, border, logo, pmq) are not emitted; the kit's own radius/motion scales are `kit.*`. */ :root { /* Brand */ --pmq-ink: #0B1220; --pmq-cobalt: #3956E0; --pmq-amber: #E8A24A; --pmq-paper: #FAFAF7; /* Cobalt scale */ --pmq-c50: #EEF1FE; --pmq-c100: #DCE3FD; --pmq-c200: #B5C2FA; --pmq-c300: #8B9FF6; --pmq-c400: #607BF1; --pmq-c500: #3956E0; --pmq-c600: #2C3FB8; --pmq-c700: #232F8E; --pmq-c800: #1A2266; --pmq-c900: #131840; /* Amber scale */ --pmq-a50: #FDF6EB; --pmq-a100: #FAE7C7; --pmq-a200: #F4D29A; --pmq-a300: #EFBC6D; --pmq-a400: #E8A24A; --pmq-a500: #D08434; --pmq-a600: #A7641F; --pmq-a700: #7C4815; /* Neutrals (cool gray) */ --pmq-n50: #F7F8FA; --pmq-n100: #EEF0F3; --pmq-n200: #DDE1E7; --pmq-n300: #C2C8D1; --pmq-n400: #98A0AD; --pmq-n500: #6E7785; --pmq-n550: #646D7B; --pmq-n600: #4F5867; --pmq-n700: #383F4B; --pmq-n800: #232934; --pmq-n900: #141821; --pmq-n950: #0B1220; /* Status (color.semantic.*) — fixed in both themes */ --pmq-success: #1F9D55; --pmq-success-strong: #157A41; --pmq-warning: #B95C0F; --pmq-error: #D92D20; --pmq-error-strong: #A8231A; --pmq-info: #3956E0; /* Type */ --pmq-font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --pmq-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Radii */ --pmq-r-xs: 2px; --pmq-r-sm: 4px; --pmq-r-md: 6px; --pmq-r-lg: 10px; --pmq-r-xl: 14px; --pmq-r-pill: 100px; /* Motion */ --pmq-ease: cubic-bezier(0.2, 0.7, 0.2, 1); --pmq-dur-1: 120ms; --pmq-dur-2: 200ms; --pmq-dur-3: 320ms; /* ── Semantic layer (light) ────────────────────────────────────────────── Role tokens. Every rule in §2–§22 that carries a ROLE (canvas, surface, border, text, link, accent, code, overlay, status text/tint/line) reads one of these, never a raw scale step; the raw scales above stay for the fixed status FILLS (bars, danger button, alert icons), the Amber tick and other fixed brand fills. Each light value below is the exact colour the kit used before this layer existed, so light output is unchanged. The dark values live in the two BEGIN/END blocks after this rule and are re-declared there token for token. Two light values are deliberately NOT the "obvious" ones: · --pmq-surface is Paper, not white — the kit's cards, inputs, menus and table cells were all Paper on a Paper canvas (the border carries the edge). White here would change every card in light. · --pmq-on-accent is Paper, not white — the primary button's label was Paper. Same reason. */ color-scheme: light; /* Surfaces */ --pmq-bg: var(--pmq-paper); /* page canvas */ --pmq-surface: var(--pmq-paper); /* card / panel / input / menu / table cell (Paper, not white — see the light-layer note) */ --pmq-surface-2: var(--pmq-n50); /* alt / hover / thead / footer band */ --pmq-surface-3: var(--pmq-n100); /* subtle fill: badge, tag, secondary button, alert icon */ --pmq-surface-4: var(--pmq-n200); /* strong fill: secondary button hover, mini-bar track */ --pmq-well: var(--pmq-n100); /* recessed fill: segmented well, progress track, skeleton */ --pmq-inverse-surface: var(--pmq-ink); /* tooltip, toast, ink button/badge/avatar, current page — flips in dark */ --pmq-inverse-surface-hover: var(--pmq-n900); /* hover state of --pmq-inverse-surface (ink button hover) */ --pmq-ink-surface: var(--pmq-ink); /* an ink banner stays ink in both themes */ --pmq-ink-surface-line: var(--pmq-ink); /* its edge: invisible on Paper, visible on the dark canvas */ --pmq-code-bg: var(--pmq-n100); /* inline code background */ --pmq-pre-bg: var(--pmq-n900); /* code block + terminal: a dark block in both themes */ --pmq-overlay: rgba(11,18,32,0.55); /* modal / drawer scrim */ /* Borders */ --pmq-border-subtle: var(--pmq-n100); /* row hairlines */ --pmq-border: var(--pmq-n200); /* default hairline */ --pmq-border-strong: var(--pmq-n300); /* ghost-button boundary, switch track, dashed empty state, spinner ring */ --pmq-border-field: var(--pmq-n500); /* form-field boundary (input, select, textarea, input-group, check, radio) — separate from border-strong so it can clear the 3:1 non-text bar; n300 measures 1.68 on Paper */ --pmq-border-hover: var(--pmq-n400); /* input hover boundary */ /* Text */ --pmq-text: var(--pmq-ink); /* headings, strong, primary */ --pmq-text-body: var(--pmq-n700); /* prose, table cells, labels, controls */ --pmq-text-2: var(--pmq-n600); /* secondary: lead, tabs, thead, ids */ --pmq-text-3: var(--pmq-n550); /* muted: hints, eyebrows, meta — n550, not n500 (4.3:1 fails AA) */ --pmq-text-4: var(--pmq-n400); /* faint: placeholder, disabled rows, menu heads */ --pmq-text-inverse: var(--pmq-paper); /* on --pmq-inverse-surface */ --pmq-text-inverse-2: var(--pmq-n400); /* muted on --pmq-inverse-surface (toast close) */ --pmq-on-ink: var(--pmq-paper); /* on --pmq-ink-surface */ --pmq-code-text: var(--pmq-ink); /* inline code text */ --pmq-pre-text: var(--pmq-n200); /* code block / terminal text */ /* Link + accent */ --pmq-link: var(--pmq-cobalt); /* links */ --pmq-link-hover: var(--pmq-c600); /* link hover */ --pmq-accent: var(--pmq-cobalt); /* primary button, checked control, focus border, active tab, progress */ --pmq-accent-hover: var(--pmq-c600); /* primary button hover */ --pmq-accent-active: var(--pmq-c700); /* primary button active */ --pmq-on-accent: var(--pmq-paper); /* label / tick / knob on --pmq-accent (Paper in light, not white) */ --pmq-accent-text: var(--pmq-c600); /* accent as text on a surface: avatar initials, spec .type */ --pmq-accent-soft: var(--pmq-c50); /* selected row, link-button hover, avatar, step halo */ --pmq-accent-soft-hover: #E3E9FD; /* hover state of --pmq-accent-soft */ --pmq-accent-line: var(--pmq-c100); /* avatar border, featured first cell */ --pmq-accent-line-strong: #C9D1FB; /* featured row divider */ /* Status (fg on surface / tint / line) — themed */ --pmq-success-fg: var(--pmq-success-strong); /* success as small text on a surface or on its tint: badge, .pmq-status--ok, KPI delta up */ --pmq-success-bg: #E4F3EA; /* success tint: badge / alert background (was color.semantic.success-bg; same CSS name) */ --pmq-success-line: #C6E5D2; /* success alert border; in dark the fixed success fill */ --pmq-warning-fg: var(--pmq-a700); /* warning as text: badge, .pmq-status--pending, .pmq-alert--warning prose. amber.700 in light (7.2:1 on Paper, 6.6:1 on its tint) — the kit's badge/status used the B95C0F fill here, which is 4.4:1 on Paper and 4.0:1 on its tint, below AA; corrected in WP 0.4 (the alert prose already used amber.700). Dark is amber.300. */ --pmq-warning-bg: #FBEFD8; /* warning tint: badge / alert background (was color.semantic.warning-bg; same CSS name) */ --pmq-warning-line: var(--pmq-a200); /* warning alert border; in dark the fixed warning fill */ --pmq-error-fg: var(--pmq-error-strong); /* error as text: badge, .pmq-status--error, .pmq-error, KPI delta down, danger menu item, .pmq-alert--error body */ --pmq-error-bg: #FBEAE8; /* error tint: badge / alert / danger-item hover background (was color.semantic.error-bg; same CSS name) */ --pmq-error-line: #F3BEB9; /* error alert border; in dark the fixed error fill */ --pmq-info-fg: var(--pmq-c600); /* info as small text: badge, .pmq-status--info (cobalt.600 in light, cobalt.300 in dark — the same step as --pmq-accent-text) */ --pmq-info-bg: var(--pmq-c50); /* info tint: badge / alert background (was color.semantic.info-bg = cobalt.50; same CSS name); dark is the accent-soft surface */ --pmq-info-line: var(--pmq-c200); /* info alert border; cobalt.400 in dark (cobalt.500 is 2.9:1 on the info tint) */ --pmq-neutral-fg: var(--pmq-n550); /* neutral / queued as small text (.pmq-status--queued) and the tinted alerts' close glyph. neutral.550 in light (5.0:1 on Paper) — the kit used neutral.500 here, 4.3:1, below AA; corrected in WP 0.4, the same step the muted text token already moved to. */ --pmq-neutral-bg: var(--pmq-n100); /* neutral tint (the badge default is --pmq-surface-3, the same colour in light) */ --pmq-neutral-line: var(--pmq-n200); /* neutral line */ /* Focus ring */ --pmq-focus: 0 0 0 3px rgba(57,86,224,0.28); /* focus ring (box-shadow): cobalt.500 @ .28 light, cobalt.300 @ .45 dark */ --pmq-focus-ring: var(--pmq-focus); /* semantic alias of --pmq-focus */ /* Shadows */ --pmq-shadow-1: 0 1px 2px rgba(11,18,32,0.06); /* elevation 1 (cards, inputs) — the kit's own four-step scale, distinct from the top-level shadow group */ --pmq-shadow-2: 0 2px 8px rgba(11,18,32,0.06), 0 1px 2px rgba(11,18,32,0.04); /* elevation 2 (raised cards, popovers) */ --pmq-shadow-3: 0 8px 24px rgba(11,18,32,0.10), 0 2px 6px rgba(11,18,32,0.04); /* elevation 3 (menus, tooltips, toasts) */ --pmq-shadow-4: 0 24px 64px rgba(11,18,32,0.14), 0 4px 16px rgba(11,18,32,0.06); /* elevation 4 (modal dialog) */ } /* ── Semantic layer (dark) ──────────────────────────────────────────────── Wiring is the app's proven no-flash shape (src/PostMQ.Web/wwwroot/app.css): :root is light; the prefers-color-scheme query supplies the OS default for anyone who has NOT chosen; an explicit [data-theme] (set by the toggle, persisted under the same localStorage key the app uses) wins over both. The dark declaration list therefore exists TWICE and the two copies must stay byte-identical between the BEGIN/END markers — BrandKitThemeTests in tests/PostMQ.Tooling.Tests enforces it, and also that every token declared in the light layer above is re-declared here. Every fg/bg pair, computed (WCAG 2.x relative luminance) by the generator from design-tokens.json, light and dark. Bar: text 4.5:1 · UI 3:1 · "—" = decorative hairline, no requirement. "!" = below the bar. The generator REFUSES to emit if a dark pair, or a light pair not flagged as a known pre-existing exception, is below its bar. Every light "!" row is a PRE-EXISTING kit value (n500 muted text on Paper was 4.3, since replaced by n550; n300 input borders on Paper are 1.6; the tinted-alert borders added in WP 0.4 are 1.2–1.7 on their tints) — flagged, not fixed, because the semantic layer changes nothing in light; they were called out in the WP 0.1 and WP 0.4 reports. fg bg light dark AA role ---------------------- --------------------- ----- ---- ----- ---- --pmq-text --pmq-bg 17.9 15.8 4.5:1 body on canvas --pmq-text --pmq-surface 17.9 15.0 4.5:1 headings on card --pmq-text --pmq-surface-2 17.6 13.7 4.5:1 strong text on alt/hover surface --pmq-text --pmq-surface-3 16.4 12.3 4.5:1 secondary button label --pmq-text --pmq-surface-4 14.3 9.0 4.5:1 secondary button hover label --pmq-text-body --pmq-surface 10.1 11.9 4.5:1 prose / table cells / labels --pmq-text-body --pmq-surface-2 10.0 10.9 4.5:1 prose on alt surface (row detail) --pmq-text-body --pmq-accent-soft 9.4 11.3 4.5:1 selected / featured row --pmq-text-2 --pmq-surface 6.9 9.7 4.5:1 lead / tab labels / cell ids --pmq-text-2 --pmq-surface-2 6.8 8.9 4.5:1 thead labels --pmq-text-2 --pmq-surface-3 6.3 8.0 4.5:1 alert icon glyph --pmq-text-3 --pmq-surface 5.0 6.7 4.5:1 muted / hints / eyebrows (n550; n500 was 4.3) --pmq-text-3 --pmq-surface-2 4.9 6.2 4.5:1 footer meta / kbd / affix --pmq-text-3 --pmq-bg 5.0 7.1 4.5:1 muted on canvas --pmq-text-4 --pmq-surface 2.5 ! 3.9 3:1 placeholder / faint (WCAG exempts placeholders; held to the UI bar) --pmq-link --pmq-surface 5.6 7.1 4.5:1 links --pmq-link --pmq-bg 5.6 7.5 4.5:1 links on canvas --pmq-link-hover --pmq-surface 8.0 10.2 4.5:1 link hover --pmq-accent-text --pmq-surface 8.0 7.1 4.5:1 spec .type / featured label --pmq-accent-text --pmq-accent-soft 7.4 6.7 4.5:1 avatar initials --pmq-accent-text --pmq-accent-line 6.6 5.7 4.5:1 featured first cell --pmq-on-accent --pmq-accent 5.6 5.0 4.5:1 primary button label --pmq-on-accent --pmq-accent-hover 8.0 7.5 4.5:1 primary button hover label --pmq-on-accent --pmq-accent-active 10.7 10.8 4.5:1 primary button active label --pmq-accent --pmq-surface 5.6 4.7 3:1 primary button / focus border / checked box on card --pmq-accent --pmq-bg 5.6 5.0 3:1 primary button on canvas --pmq-accent --pmq-well 5.1 4.9 3:1 progress fill on track --pmq-accent --pmq-surface-2 5.5 4.3 3:1 active tab bar on alt surface --pmq-text-inverse --pmq-inverse-surface 17.9 15.8 4.5:1 tooltip / toast / ink button label --pmq-text-inverse-2 --pmq-inverse-surface 7.1 6.1 4.5:1 toast close glyph --pmq-inverse-surface --pmq-bg 17.9 15.8 3:1 toast / ink button against canvas --pmq-inverse-surface --pmq-surface 17.9 15.0 3:1 ink button / current page on card --pmq-on-ink --pmq-ink-surface 17.9 17.9 4.5:1 ink banner text --pmq-ink-surface-line --pmq-bg 17.9 1.4 — ink banner edge on canvas (light: none, by design) --pmq-code-text --pmq-code-bg 16.4 11.0 4.5:1 inline code --pmq-pre-text --pmq-pre-bg 13.5 15.1 4.5:1 code block / terminal --pmq-border-field --pmq-surface 4.3 3.9 3:1 form-field boundary (input / select / textarea / check / radio) --pmq-border-field --pmq-surface-2 4.3 3.6 3:1 form-field boundary on the alt / banded surface --pmq-border-strong --pmq-surface 1.6 ! 3.2 3:1 ghost-button boundary / switch track --pmq-border-hover --pmq-surface 2.5 ! 4.8 3:1 input hover boundary --pmq-border --pmq-surface 1.3 1.3 — hairline (decorative, never the only cue) --pmq-border-subtle --pmq-surface 1.1 1.1 — row hairline (decorative) --pmq-surface --pmq-bg 1.0 1.1 — card vs canvas (border carries the edge) --pmq-surface-2 --pmq-surface 1.0 1.1 — thead / footer band vs card --pmq-success-fg --pmq-success-bg 4.7 7.4 4.5:1 success badge / alert prose on its tint --pmq-success-fg --pmq-surface 5.2 8.1 4.5:1 .pmq-status--ok / KPI delta up on card --pmq-success-fg --pmq-bg 5.2 8.5 4.5:1 success text on canvas --pmq-success-line --pmq-success-bg 1.2 ! 4.7 3:1 success alert border on its tint --pmq-success-line --pmq-bg 1.3 ! 5.4 3:1 success alert border on canvas --pmq-warning-fg --pmq-warning-bg 6.6 9.4 4.5:1 warning badge / alert prose on its tint (amber.700 in light) --pmq-warning-fg --pmq-surface 7.2 10.2 4.5:1 .pmq-status--pending on card --pmq-warning-fg --pmq-bg 7.2 10.8 4.5:1 warning text on canvas --pmq-warning-line --pmq-warning-bg 1.3 ! 3.6 3:1 warning alert border on its tint --pmq-warning-line --pmq-bg 1.4 ! 4.1 3:1 warning alert border on canvas --pmq-error-fg --pmq-error-bg 6.2 7.6 4.5:1 error badge / alert prose / danger-item hover on its tint --pmq-error-fg --pmq-surface 6.9 7.9 4.5:1 .pmq-status--error / .pmq-error / KPI delta down on card --pmq-error-fg --pmq-bg 6.9 8.3 4.5:1 error text on canvas --pmq-error-line --pmq-error-bg 1.4 ! 3.6 3:1 error alert border on its tint --pmq-error-line --pmq-bg 1.6 ! 3.9 3:1 error alert border on canvas --pmq-info-fg --pmq-info-bg 7.4 6.7 4.5:1 info badge on its tint --pmq-info-fg --pmq-surface 8.0 7.1 4.5:1 .pmq-status--info on card --pmq-info-fg --pmq-bg 8.0 7.5 4.5:1 info text on canvas --pmq-info-line --pmq-info-bg 1.5 ! 4.5 3:1 info alert border on its tint --pmq-info-line --pmq-bg 1.7 ! 5.0 3:1 info alert border on canvas --pmq-neutral-fg --pmq-neutral-bg 4.6 5.5 4.5:1 queued text on the neutral tint (n550 in light) --pmq-neutral-fg --pmq-surface 5.0 6.7 4.5:1 .pmq-status--queued on card (n550; n500 was 4.3) --pmq-neutral-fg --pmq-bg 5.0 7.1 4.5:1 queued text on canvas --pmq-neutral-fg --pmq-success-bg 4.6 6.2 3:1 tinted alert close glyph (success) --pmq-neutral-fg --pmq-warning-bg 4.6 6.2 3:1 tinted alert close glyph (warning) --pmq-neutral-fg --pmq-error-bg 4.5 6.5 3:1 tinted alert close glyph (error) --pmq-neutral-fg --pmq-info-bg 4.6 6.4 3:1 tinted alert close glyph (info) --pmq-neutral-line --pmq-neutral-bg 1.1 ! 3.2 3:1 neutral line on its tint --pmq-text --pmq-success-bg 16.3 13.8 4.5:1 alert title on the success tint --pmq-text --pmq-warning-bg 16.4 13.7 4.5:1 alert title on the warning tint --pmq-text --pmq-error-bg 16.1 14.6 4.5:1 alert title on the error tint --pmq-text --pmq-info-bg 16.6 14.2 4.5:1 alert title on the info tint --pmq-text-body --pmq-success-bg 9.2 11.0 4.5:1 success alert prose --pmq-text-body --pmq-info-bg 9.4 11.3 4.5:1 info alert prose Dark choices, in one line each: canvas is Ink and cards are n900 (the palette's "elevated dark surface"); the primary button is cobalt.400 with an INK label (5.0:1 — white on cobalt.400 is only 3.9), hover cobalt.300; links are cobalt.300 (7.1:1); "inverse" chrome (tooltip, toast, ink button) flips to a light surface so it does not vanish against the Ink canvas; the ink banner and the code block stay dark, the banner gaining an edge line; the focus ring is cobalt.300 at higher alpha because a cobalt.500 ring at .28 disappears on Ink (palette.md: "focus ring alpha bumped on Ink"); the four shadows are re-based on black because rgba(Ink) is invisible on Ink; the status triples (WP 0.4) keep the fixed fills for bars and buttons but put text on a light step of the same hue over a near-surface tint, and the tinted alert's border becomes the fixed fill so it clears 3:1. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { /* BEGIN pmq dark tokens */ color-scheme: dark; --pmq-bg: var(--pmq-ink); --pmq-surface: var(--pmq-n900); --pmq-surface-2: #1A2030; --pmq-surface-3: var(--pmq-n800); --pmq-surface-4: var(--pmq-n700); --pmq-well: #0F1523; --pmq-inverse-surface: #E9ECF1; --pmq-inverse-surface-hover: var(--pmq-n200); --pmq-ink-surface: var(--pmq-ink); --pmq-ink-surface-line: #262D3B; --pmq-code-bg: var(--pmq-n800); --pmq-pre-bg: #060A14; --pmq-overlay: rgba(0,0,0,0.6); --pmq-border-subtle: #1C2230; --pmq-border: #262D3B; --pmq-border-strong: #5F6878; --pmq-border-field: #6E7785; --pmq-border-hover: #7C8594; --pmq-text: #E9ECF1; --pmq-text-body: #CFD4DD; --pmq-text-2: #B9C0CC; --pmq-text-3: var(--pmq-n400); --pmq-text-4: var(--pmq-n500); --pmq-text-inverse: var(--pmq-ink); --pmq-text-inverse-2: var(--pmq-n600); --pmq-on-ink: var(--pmq-paper); --pmq-code-text: #DCE0E7; --pmq-pre-text: var(--pmq-n200); --pmq-link: var(--pmq-c300); --pmq-link-hover: var(--pmq-c200); --pmq-accent: var(--pmq-c400); --pmq-accent-hover: var(--pmq-c300); --pmq-accent-active: var(--pmq-c200); --pmq-on-accent: var(--pmq-ink); --pmq-accent-text: var(--pmq-c300); --pmq-accent-soft: #151C33; --pmq-accent-soft-hover: #1B2440; --pmq-accent-line: var(--pmq-c800); --pmq-accent-line-strong: var(--pmq-c700); --pmq-success-fg: #4CC57A; --pmq-success-bg: #0F2418; --pmq-success-line: var(--pmq-success); --pmq-warning-fg: var(--pmq-a300); --pmq-warning-bg: #2A1E0E; --pmq-warning-line: var(--pmq-warning); --pmq-error-fg: #FF8C7A; --pmq-error-bg: #2C1416; --pmq-error-line: var(--pmq-error); --pmq-info-fg: var(--pmq-c300); --pmq-info-bg: #151C33; --pmq-info-line: var(--pmq-c400); --pmq-neutral-fg: var(--pmq-n400); --pmq-neutral-bg: var(--pmq-n800); --pmq-neutral-line: var(--pmq-n500); --pmq-focus: 0 0 0 3px rgba(139,159,246,0.45); --pmq-focus-ring: var(--pmq-focus); --pmq-shadow-1: 0 1px 2px rgba(0,0,0,0.5); --pmq-shadow-2: 0 2px 8px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4); --pmq-shadow-3: 0 8px 24px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.4); --pmq-shadow-4: 0 24px 64px rgba(0,0,0,0.6), 0 4px 16px rgba(0,0,0,0.45); /* END pmq dark tokens */ } } /* Explicit user choice wins over the OS default (higher specificity than :root). */ :root[data-theme="dark"] { /* BEGIN pmq dark tokens */ color-scheme: dark; --pmq-bg: var(--pmq-ink); --pmq-surface: var(--pmq-n900); --pmq-surface-2: #1A2030; --pmq-surface-3: var(--pmq-n800); --pmq-surface-4: var(--pmq-n700); --pmq-well: #0F1523; --pmq-inverse-surface: #E9ECF1; --pmq-inverse-surface-hover: var(--pmq-n200); --pmq-ink-surface: var(--pmq-ink); --pmq-ink-surface-line: #262D3B; --pmq-code-bg: var(--pmq-n800); --pmq-pre-bg: #060A14; --pmq-overlay: rgba(0,0,0,0.6); --pmq-border-subtle: #1C2230; --pmq-border: #262D3B; --pmq-border-strong: #5F6878; --pmq-border-field: #6E7785; --pmq-border-hover: #7C8594; --pmq-text: #E9ECF1; --pmq-text-body: #CFD4DD; --pmq-text-2: #B9C0CC; --pmq-text-3: var(--pmq-n400); --pmq-text-4: var(--pmq-n500); --pmq-text-inverse: var(--pmq-ink); --pmq-text-inverse-2: var(--pmq-n600); --pmq-on-ink: var(--pmq-paper); --pmq-code-text: #DCE0E7; --pmq-pre-text: var(--pmq-n200); --pmq-link: var(--pmq-c300); --pmq-link-hover: var(--pmq-c200); --pmq-accent: var(--pmq-c400); --pmq-accent-hover: var(--pmq-c300); --pmq-accent-active: var(--pmq-c200); --pmq-on-accent: var(--pmq-ink); --pmq-accent-text: var(--pmq-c300); --pmq-accent-soft: #151C33; --pmq-accent-soft-hover: #1B2440; --pmq-accent-line: var(--pmq-c800); --pmq-accent-line-strong: var(--pmq-c700); --pmq-success-fg: #4CC57A; --pmq-success-bg: #0F2418; --pmq-success-line: var(--pmq-success); --pmq-warning-fg: var(--pmq-a300); --pmq-warning-bg: #2A1E0E; --pmq-warning-line: var(--pmq-warning); --pmq-error-fg: #FF8C7A; --pmq-error-bg: #2C1416; --pmq-error-line: var(--pmq-error); --pmq-info-fg: var(--pmq-c300); --pmq-info-bg: #151C33; --pmq-info-line: var(--pmq-c400); --pmq-neutral-fg: var(--pmq-n400); --pmq-neutral-bg: var(--pmq-n800); --pmq-neutral-line: var(--pmq-n500); --pmq-focus: 0 0 0 3px rgba(139,159,246,0.45); --pmq-focus-ring: var(--pmq-focus); --pmq-shadow-1: 0 1px 2px rgba(0,0,0,0.5); --pmq-shadow-2: 0 2px 8px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.4); --pmq-shadow-3: 0 8px 24px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.4); --pmq-shadow-4: 0 24px 64px rgba(0,0,0,0.6), 0 4px 16px rgba(0,0,0,0.45); /* END pmq dark tokens */ }