@medquantis/design-system 0.0.0-bootstrap.0 → 1.0.0

package/dist/llms.txt

@@ -0,0 +1,39 @@
+# MedQuantis design system
+
+> Design tokens, shared CSS, self-hosted fonts, brand files and written guidelines for every MedQuantis medium: slides, A4 reports, papers, the website, newsletters and interactive apps. Navy is the single brand accent; documents never use status colours.
+
+Every value is a `--mq-*` CSS custom property in `tokens.css`. Use the semantic names, never the `--mq-core-*` ones, and never write a literal colour, font, radius or spacing value. Status colours (`--mq-success`, `--mq-warning`, `--mq-danger`, `--mq-info`) are for interactive apps only, always with an icon or a word. Corners are 3 px for small items and 6 px for cards; 12 px only for app dialogs, drawers and command palettes. Numbers use the straight apostrophe as thousands separator, a decimal point, a non-breaking space before `%` and after `CHF`. Copy never contains an em dash or an en dash.
+
+The links below point at the exact release on the jsDelivr CDN; pin that version, never a range.
+
+## Guidelines
+
+- [Principles](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.0.0/guidelines/principles.md): The principles that decide the cases the other files do not cover
+- [Brand](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.0.0/guidelines/brand.md): Name, tagline, legal line, wordmark, monogram, favicon, icons
+- [Voice](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.0.0/guidelines/voice.md): Tone, words to prefer and avoid, languages, terminology in French, German, Italian and English
+- [Writing](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.0.0/guidelines/writing.md): No em or en dash, titles, sentences and lists, French typography
+- [Colour](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.0.0/guidelines/colour.md): Semantic colour tokens, the medium split, navy panels, states by mark style, status colours in apps
+- [Typography](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.0.0/guidelines/typography.md): Families, weights, roles, sizes and line heights
+- [Layout](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.0.0/guidelines/layout.md): Media, report skeleton, widths and spacing, radius, components, tables, app patterns, print
+- [Charts](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.0.0/guidelines/charts.md): The ordered palette, highlight on grey, sequential and diverging use, marks, legends
+- [Data patterns](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.0.0/guidelines/data-patterns.md): Numbers, amounts, dates, null versus zero, confidential and illustrative data
+- [Accessibility](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.0.0/guidelines/accessibility.md): WCAG 2.2 AA, contrast pairs, focus, targets, motion, structure
+- [Specialising the design system](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.0.0/guidelines/specialising.md): Framework neutrality, the four rules, the promotion tests, the one-off log
+
+## Tokens and CSS
+
+- [tokens.css](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.0.0/dist/tokens.css): every token as a `--mq-*` custom property; load it first
+- [tokens.json](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.0.0/dist/tokens.json): every token with its resolved value and description
+- [tailwind.css](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.0.0/dist/tailwind.css): Tailwind 4 theme with 50 to 950 scales, for apps
+- [base.css](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.0.0/css/base.css): typography roles for documents
+- [components.css](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.0.0/css/components.css): the shared `mq-` document components
+- [slide.css](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.0.0/css/slide.css): the 1280 by 720 slide canvas
+- [print.css](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.0.0/css/print.css): A4 pages with exact colour printing
+- [app.css](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.0.0/css/app.css): status badges, for interactive apps only
+- [fonts.css](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.0.0/fonts/fonts.css): self-hosted Outfit, Newsreader and Geist Mono
+
+## Optional
+
+- [llms-full.txt](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.0.0/dist/llms-full.txt): every guideline in full and every token with its value
+- [kit-contract.css](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.0.0/dist/kit-contract.css): unprefixed names for homemade-claude-kit renderers only, never loaded in an app
+- [Guidelines index](https://cdn.jsdelivr.net/npm/@medquantis/design-system@1.0.0/guidelines/README.md): the file list and where each legacy rule went

package/dist/tailwind.css

@@ -0,0 +1,116 @@
+/*
+ * MedQuantis Tailwind 4 theme, generated from tokens/ by the design-system build. Do not edit.
+ * Import it after Tailwind: @import "tailwindcss"; then this file. It loads tokens.css itself.
+ * Scales (50 to 950) are derived in OKLCH from one token each; step 500 is that token.
+ */
+@import "./tokens.css";
+
+@theme static {
+  --color-navy-50: #f1f5fd;
+  --color-navy-100: #dce3f1;
+  --color-navy-200: #bec9de;
+  --color-navy-300: #91a2c3;
+  --color-navy-400: #5e74a1;
+  --color-navy-500: #0a2463;
+  --color-navy-600: #071e55;
+  --color-navy-700: #051847;
+  --color-navy-800: #03123a;
+  --color-navy-900: #020c2e;
+  --color-navy-950: #010721;
+  --color-success-50: #f0f8f0;
+  --color-success-100: #e0eee0;
+  --color-success-200: #c9dfc8;
+  --color-success-300: #a7c8a6;
+  --color-success-400: #7ead7d;
+  --color-success-500: #2e7d32;
+  --color-success-600: #276c2a;
+  --color-success-700: #1f5b22;
+  --color-success-800: #184b1b;
+  --color-success-900: #123b14;
+  --color-success-950: #0b2c0d;
+  --color-warning-50: #fbf4ed;
+  --color-warning-100: #f4e8dc;
+  --color-warning-200: #e9d6c2;
+  --color-warning-300: #d9bc9d;
+  --color-warning-400: #c59d6f;
+  --color-warning-500: #a06400;
+  --color-warning-600: #8b5600;
+  --color-warning-700: #764800;
+  --color-warning-800: #613b00;
+  --color-warning-900: #4e2e00;
+  --color-warning-950: #3b2200;
+  --color-danger-50: #fff2f0;
+  --color-danger-100: #ffe3e0;
+  --color-danger-200: #ffcdc7;
+  --color-danger-300: #fbaca4;
+  --color-danger-400: #f1837a;
+  --color-danger-500: #d8232a;
+  --color-danger-600: #bc1d23;
+  --color-danger-700: #a0171c;
+  --color-danger-800: #851116;
+  --color-danger-900: #6b0c10;
+  --color-danger-950: #53070a;
+  --color-info-50: #eff6ff;
+  --color-info-100: #ddeafc;
+  --color-info-200: #c4d9f5;
+  --color-info-300: #9fbfea;
+  --color-info-400: #72a0dc;
+  --color-info-500: #1565c0;
+  --color-info-600: #1157a7;
+  --color-info-700: #0c498e;
+  --color-info-800: #083c76;
+  --color-info-900: #052f5f;
+  --color-info-950: #032249;
+}
+
+@theme inline {
+  --font-sans: var(--mq-font-family-ui);
+  --font-serif: var(--mq-font-family-body);
+  --font-mono: var(--mq-font-family-mono);
+  --font-heading: var(--mq-font-family-heading);
+  --radius: var(--mq-radius-small);
+  --radius-xs: var(--mq-radius-small);
+  --radius-sm: var(--mq-radius-small);
+  --radius-md: var(--mq-radius-medium);
+  --radius-lg: var(--mq-radius-medium);
+  --radius-xl: var(--mq-radius-medium);
+  --radius-2xl: var(--mq-radius-medium);
+  --radius-3xl: var(--mq-radius-medium);
+  --radius-4xl: var(--mq-radius-medium);
+  --radius-overlay: var(--mq-radius-overlay);
+  --color-chart-series-1: var(--mq-chart-series-1);
+  --color-chart-series-2: var(--mq-chart-series-2);
+  --color-chart-series-3: var(--mq-chart-series-3);
+  --color-chart-series-4: var(--mq-chart-series-4);
+  --color-chart-rest: var(--mq-chart-rest);
+  --color-chart-axis: var(--mq-chart-axis);
+  --color-chart-baseline: var(--mq-chart-baseline);
+  --color-accent: var(--mq-accent);
+  --color-accent-hover: var(--mq-accent-hover);
+  --color-accent-pale: var(--mq-accent-pale);
+  --color-accent-pale-2: var(--mq-accent-pale-2);
+  --color-on-accent: var(--mq-on-accent);
+  --color-ink: var(--mq-ink);
+  --color-muted: var(--mq-muted);
+  --color-tertiary: var(--mq-tertiary);
+  --color-decoration: var(--mq-decoration);
+  --color-canvas: var(--mq-canvas);
+  --color-surface: var(--mq-surface);
+  --color-surface-alt: var(--mq-surface-alt);
+  --color-desk: var(--mq-desk);
+  --color-border: var(--mq-border);
+  --color-border-light: var(--mq-border-light);
+  --color-border-strong: var(--mq-border-strong);
+  --color-panel-start: var(--mq-panel-start);
+  --color-panel-end: var(--mq-panel-end);
+  --color-on-navy-title: var(--mq-on-navy-title);
+  --color-on-navy-secondary: var(--mq-on-navy-secondary);
+  --color-on-navy-second-level: var(--mq-on-navy-second-level);
+  --color-on-navy-accent: var(--mq-on-navy-accent);
+  --color-on-navy-rule: var(--mq-on-navy-rule);
+  --color-on-navy-rule-strong: var(--mq-on-navy-rule-strong);
+  --color-on-navy-pill: var(--mq-on-navy-pill);
+  --color-on-navy-discreet: var(--mq-on-navy-discreet);
+  --color-warning-fill: var(--mq-warning-fill);
+  --color-warning-tint: var(--mq-warning-tint);
+}

package/dist/tokens.css

@@ -0,0 +1,179 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --mq-core-navy: #0a2463; /** MedQuantis navy, the single brand accent everywhere (ADR-0003). */
+  --mq-core-navy-hover: #061a4d; /** Navy hover state (Report design system, 2026-10-08). */
+  --mq-core-navy-2: #0f2a5e; /** Lightest stop of the navy panel and hero gradients (Report design system, 2026-10-08). */
+  --mq-core-navy-3: #0a2047; /** Middle stop of the navy panel and hero gradients (Report design system, 2026-10-08). */
+  --mq-core-navy-4: #071733; /** Darkest stop of the hero gradient (Report design system, 2026-10-08). */
+  --mq-core-pale: #eaeef7; /** Pale navy fill for a highlighted state (Report design system, 2026-10-08). */
+  --mq-core-pale-2: #f2f4f9; /** Quieter pale navy fill (Report design system, 2026-10-08). */
+  --mq-core-bluegrey-1: #5d6f91; /** Blue-grey 1, darkest of the secondary family (Report design system, 2026-10-08). */
+  --mq-core-bluegrey-2: #8795b3; /** Blue-grey 2 (Report design system, 2026-10-08). */
+  --mq-core-bluegrey-3: #c3cbdc; /** Blue-grey 3 (Report design system, 2026-10-08). */
+  --mq-core-bluegrey-4: #dde3ee; /** Blue-grey 4, lightest of the secondary family (Report design system, 2026-10-08). */
+  --mq-core-grey-950: #1a1a1a; /** Warm near-black (Report design system, 2026-10-08). */
+  --mq-core-grey-700: #555555; /** Warm dark grey (Report design system, 2026-10-08). */
+  --mq-core-grey-600: #707070; /** Owner ruling 1, 2026-10-09: the tertiary grey for all text, 4.74:1 on canvas. */
+  --mq-core-grey-500: #8c8c8c; /** Owner ruling 1, 2026-10-09: non-text decoration only, 3.22:1 on canvas. */
+  --mq-core-grey-300: #dddbd6; /** Warm border grey (Report design system, 2026-10-08). */
+  --mq-core-grey-250: #e9e8e4; /** Owner ruling 9, 2026-10-09: the on-screen desk around a page preview. */
+  --mq-core-grey-200: #ebeae6; /** Warm hairline grey (Report design system, 2026-10-08). */
+  --mq-core-grey-100: #f5f4f1; /** Warm recessed surface (Report design system, 2026-10-08). */
+  --mq-core-grey-50: #fafaf8; /** Owner ruling 9, 2026-10-09: warm off-white of every document page. */
+  --mq-core-white: #ffffff; /** White (Report design system, 2026-10-08). */
+  --mq-core-white-alpha-68: rgba(255, 255, 255, 0.68); /** Owner ruling 2, 2026-10-09: white at 68 % for secondary text on navy. */
+  --mq-core-white-alpha-40: rgba(255, 255, 255, 0.4); /** Owner ruling 2, 2026-10-09: white at 40 % for discreet numbers on navy. */
+  --mq-core-white-alpha-18: rgba(255, 255, 255, 0.18); /** Owner ruling 2, 2026-10-09: white at 18 % for rules on navy. */
+  --mq-core-white-alpha-16: rgba(255, 255, 255, 0.16); /** Owner ruling 2, 2026-10-09: white at 16 % for rules on navy. */
+  --mq-core-white-alpha-12: rgba(255, 255, 255, 0.12); /** Owner ruling 2, 2026-10-09: white at 12 % for icon-pill fills on navy. */
+  --mq-core-green: #2e7d32; /** Success hue for interactive apps (ADR-0004). */
+  --mq-core-amber: #d4850a; /** Owner ruling 5, 2026-10-09: warning fill, always with ink text (ADR-0004). */
+  --mq-core-amber-strong: #a06400; /** Owner ruling 5, 2026-10-09: warning text, icon and border, 4.86:1 on white (ADR-0004). */
+  --mq-core-amber-tint: #fbf3e7; /** Owner ruling 5, 2026-10-09: warning tint, the warning fill at 10 % on white; warning strong on it is 4.42:1, so text on the tint stays ink. */
+  --mq-core-red: #d8232a; /** Swiss red, kept only as the danger status colour (ADR-0003, ADR-0004). */
+  --mq-core-blue: #1565c0; /** Info hue for interactive apps (ADR-0004). */
+  --mq-core-font-family-outfit: Outfit, system-ui, -apple-system, 'Segoe UI', sans-serif; /** Outfit, the sans for headings, labels and app UI (Owner ruling 10, 2026-10-09). */
+  --mq-core-font-family-newsreader: Newsreader, Georgia, 'Times New Roman', serif; /** Newsreader, the only serif; Georgia and Times New Roman are fallbacks only (Owner ruling 10, 2026-10-09). */
+  --mq-core-font-family-geist-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace; /** Geist Mono for figures and codes (Owner ruling 10, 2026-10-09). */
+  --mq-core-font-weight-300: 300; /** Light weight (Owner ruling 6, 2026-10-09: the Quantis half of the wordmark). */
+  --mq-core-font-weight-400: 400; /** Regular weight for body text (Report design system, 2026-10-08). */
+  --mq-core-font-weight-500: 500; /** Owner ruling 4, 2026-10-09: medium weight for every heading, column title and hero figure. */
+  --mq-core-font-weight-600: 600; /** Owner ruling 4, 2026-10-09: semibold only for a short highlighted word inside body text. */
+  --mq-core-font-size-11: 11px; /** Font size 11 px (Report design system, 2026-10-08). */
+  --mq-core-font-size-13: 13px; /** Font size 13 px (Report design system, 2026-10-08). */
+  --mq-core-font-size-14: 14px; /** Font size 14 px (Report design system, 2026-10-08). */
+  --mq-core-font-size-15: 15px; /** Font size 15 px (Report design system, 2026-10-08). */
+  --mq-core-font-size-16: 16px; /** Font size 16 px (Report design system, 2026-10-08). */
+  --mq-core-font-size-18: 18px; /** Font size 18 px (Report design system, 2026-10-08). */
+  --mq-core-font-size-20: 20px; /** Font size 20 px (Report design system, 2026-10-08). */
+  --mq-core-font-size-24: 24px; /** Font size 24 px (Report design system, 2026-10-08). */
+  --mq-core-font-size-30: 30px; /** Font size 30 px (Report design system, 2026-10-08). */
+  --mq-core-font-size-32: 32px; /** Font size 32 px (Report design system, 2026-10-08). */
+  --mq-core-font-size-34: 34px; /** Font size 34 px (Report design system, 2026-10-08). */
+  --mq-core-font-size-36: 36px; /** Font size 36 px (increment 07 component need: the slide title, Report design system, 2026-10-08). */
+  --mq-core-font-size-50: 50px; /** Font size 50 px (Report design system, 2026-10-08). */
+  --mq-core-font-size-56: 56px; /** Font size 56 px (Report design system, 2026-10-08). */
+  --mq-core-font-size-12-5: 12.5px; /** Font size 12.5 px (Report design system, 2026-10-08). */
+  --mq-core-font-size-16-5: 16.5px; /** Font size 16.5 px (Report design system, 2026-10-08). */
+  --mq-core-radius-3: 3px; /** Owner ruling 3, 2026-10-09: small items (tags, inputs, chips). */
+  --mq-core-radius-6: 6px; /** Owner ruling 3, 2026-10-09: cards and panels; the maximum anywhere, no pill shapes. */
+  --mq-core-radius-12: 12px; /** Owner ruling 3, amended 2026-10-10: the one exception above 6 px, for app dialogs and modals, side drawers and command palettes only; never in documents, slides, cards or website media. */
+  --mq-core-shadow-small: 0px 1px 2px 0px rgba(0, 0, 0, 0.05); /** Small elevation for cards (increment 07 component need, Report design system, 2026-10-08). */
+  --mq-core-shadow-medium: 0px 3px 12px 0px rgba(0, 0, 0, 0.07); /** Medium elevation for a slide or page shown on the desk (increment 07 component need, Report design system, 2026-10-08). */
+  --mq-core-shadow-panel: 0px 14px 36px 0px rgba(10, 36, 99, 0.24); /** Navy-tinted elevation for navy panels (increment 07 component need, Report design system, 2026-10-08). */
+  --mq-core-size-720: 720px; /** Slide canvas height, 720 px (increment 07 component need: the 1280 by 720 slide canvas). */
+  --mq-core-size-760: 760px; /** Reading measure, 760 px (increment 07 component need, Report design system, 2026-10-08). */
+  --mq-core-size-1040: 1040px; /** Content width of a screen document, 1040 px (increment 07 component need, Report design system, 2026-10-08). */
+  --mq-core-size-1280: 1280px; /** Slide canvas width, 1280 px (increment 07 component need: the 1280 by 720 slide canvas). */
+  --mq-core-size-a4-width: 793.7px; /** A4 sheet width, 210 mm at 96 px per inch (increment 07 component need: the A4 print page). */
+  --mq-core-size-a4-height: 1122.52px; /** A4 sheet height, 297 mm at 96 px per inch (increment 07 component need: the A4 print page). */
+  --mq-core-space-4: 4px; /** Spacing step 4 px on the 4 and 8 px grid (Report design system, 2026-10-08). */
+  --mq-core-space-8: 8px; /** Spacing step 8 px on the 4 and 8 px grid (Report design system, 2026-10-08). */
+  --mq-core-space-12: 12px; /** Spacing step 12 px on the 4 and 8 px grid (Report design system, 2026-10-08). */
+  --mq-core-space-16: 16px; /** Spacing step 16 px on the 4 and 8 px grid (Report design system, 2026-10-08). */
+  --mq-core-space-24: 24px; /** Spacing step 24 px on the 4 and 8 px grid (Report design system, 2026-10-08). */
+  --mq-core-space-32: 32px; /** Spacing step 32 px on the 4 and 8 px grid (Report design system, 2026-10-08). */
+  --mq-core-space-48: 48px; /** Spacing step 48 px on the 4 and 8 px grid (Report design system, 2026-10-08). */
+  --mq-core-space-72: 72px; /** Spacing step 72 px on the 4 and 8 px grid (Report design system, 2026-10-08). */
+  --mq-core-stroke-1: 1px; /** Hairline stroke (Report design system, 2026-10-08). */
+  --mq-core-stroke-2: 2px; /** Focus ring stroke (research note 0001, section 7). */
+  --mq-core-stroke-3: 3px; /** Accent tab and rule stroke, 3 px (increment 07 component need: the navy tab of calm columns, callouts and takeaways, Report design system, 2026-10-08). */
+  --mq-chart-series-1: #0a2463; /** Categorical series 1 of 4, always used first; also the highlight in highlight-on-grey charts. */
+  --mq-chart-series-2: #5d6f91; /** Categorical series 2 of 4. */
+  --mq-chart-series-3: #8795b3; /** Categorical series 3 of 4. */
+  --mq-chart-series-4: #c3cbdc; /** Categorical series 4 of 4; context bars in highlight-on-grey charts. */
+  --mq-chart-rest: #dde3ee; /** Remainder or empty fill, never a categorical series; too close to series 4 under colour-vision deficiency, so draw it with a series 4 outline. */
+  --mq-chart-axis: #8c8c8c; /** Axis lines and ticks (non-text, Owner ruling 1, 2026-10-09); axis labels use tertiary. */
+  --mq-chart-baseline: #dddbd6; /** Gridlines and baselines (decorative). */
+  --mq-accent: #0a2463; /** The single brand accent: links, active states, figures, navy panels (ADR-0003). */
+  --mq-accent-hover: #061a4d; /** Hover state of accent-coloured controls. */
+  --mq-accent-pale: #eaeef7; /** Pale accent fill for a highlighted row, tag or state. */
+  --mq-accent-pale-2: #f2f4f9; /** Quieter pale accent fill. */
+  --mq-on-accent: #ffffff; /** Text and icons on an accent fill, 14.53:1 on navy. */
+  --mq-ink: #1a1a1a; /** Primary text. */
+  --mq-muted: #555555; /** Secondary text. */
+  --mq-tertiary: #707070; /** Owner ruling 1, 2026-10-09: tertiary text, captions and footers. */
+  --mq-decoration: #8c8c8c; /** Owner ruling 1, 2026-10-09: non-text decoration only (axis lines, ticks, icons beside a label), never text. */
+  --mq-canvas: #fafaf8; /** Owner ruling 9, 2026-10-09: background of every document page (A4 report, paper, slide). */
+  --mq-surface: #ffffff; /** Owner ruling 9, 2026-10-09: cards and panels on the page. */
+  --mq-surface-alt: #f5f4f1; /** Recessed surface: table headers, grouped areas. */
+  --mq-desk: #e9e8e4; /** Owner ruling 9, 2026-10-09: on screen only, around a page preview; never inside a document. */
+  --mq-border: #dddbd6; /** Borders and dividers. */
+  --mq-border-light: #ebeae6; /** Hairlines and card borders. */
+  --mq-border-strong: #5d6f91; /** Outline of outlined and dashed state marks in documents (badges, legend swatches), 3:1 or more on canvas and surface for WCAG 1.4.11 (increment 07 component need, ADR-0004: states by mark style). */
+  --mq-panel-start: #0f2a5e; /** Light end of the navy panel gradient; the worst case for text on navy. */
+  --mq-panel-end: #0a2047; /** Dark end of the navy panel gradient. */
+  --mq-on-navy-title: #ffffff; /** Owner ruling 2, 2026-10-09: titles, figures and icons on navy. */
+  --mq-on-navy-secondary: rgba(255, 255, 255, 0.68); /** Owner ruling 2, 2026-10-09: secondary text and labels on navy. */
+  --mq-on-navy-second-level: #c3cbdc; /** Owner ruling 2, 2026-10-09: second-level text on navy. */
+  --mq-on-navy-accent: #8795b3; /** Owner ruling 2, 2026-10-09: the one-off accent on navy; replaces the retired sky blue. */
+  --mq-on-navy-rule: rgba(255, 255, 255, 0.16); /** Owner ruling 2, 2026-10-09: rules on navy (decorative). */
+  --mq-on-navy-rule-strong: rgba(255, 255, 255, 0.18); /** Owner ruling 2, 2026-10-09: stronger rules on navy (decorative). */
+  --mq-on-navy-pill: rgba(255, 255, 255, 0.12); /** Owner ruling 2, 2026-10-09: icon-pill fill on navy (decorative); the icon on it stays white. */
+  --mq-on-navy-discreet: rgba(255, 255, 255, 0.4); /** Owner ruling 2, 2026-10-09: discreet numbers on navy; 3.44:1, so large text or non-text only. */
+  --mq-success: #2e7d32; /** Apps only: success, always with an icon or a word (ADR-0004). */
+  --mq-warning: #a06400; /** Owner ruling 5, 2026-10-09: warning text, icons and borders; apps only (ADR-0004). */
+  --mq-danger: #d8232a; /** Apps only: errors and destructive actions, always with an icon or a word (ADR-0003, ADR-0004). */
+  --mq-info: #1565c0; /** Apps only: information, always with an icon or a word (ADR-0004). */
+  --mq-warning-fill: #d4850a; /** Owner ruling 5, 2026-10-09: warning badge and highlight fill, always with ink text; white on it is forbidden (2.93:1). */
+  --mq-warning-tint: #fbf3e7; /** Owner ruling 5, 2026-10-09: warning tint behind ink text; warning strong only for icons and borders on it. */
+  --mq-dim: #707070; /** Retired name of the old tertiary grey; resolves to tertiary (Owner ruling 1, 2026-10-09). */
+  --mq-accent-on-dark: #8795b3; /** Retired name of the accent on navy; resolves to the on-navy accent (Owner ruling 2, 2026-10-09). Use --mq-on-navy-title for titles and rules, --mq-on-navy-accent for the one-off accent. */
+  --mq-focus-ring-color: #0a2463; /** Focus ring on light backgrounds: 2 px navy with an offset, 13.90:1 on canvas (research note 0001, section 7). */
+  --mq-focus-ring-color-on-navy: #ffffff; /** Focus ring on navy backgrounds, 14.53:1. */
+  --mq-focus-ring-width: 2px; /** Focus ring width (WCAG 2.4.7 and 1.4.11). */
+  --mq-focus-ring-offset: 2px; /** Gap between the focused element and its ring. */
+  --mq-radius-small: 3px; /** Owner ruling 3, 2026-10-09: tags, inputs and chips. */
+  --mq-radius-medium: 6px; /** Owner ruling 3, 2026-10-09: cards and panels. */
+  --mq-radius-overlay: 12px; /** Owner ruling 3, amended 2026-10-10: dialogs and modals, side drawers and command palettes in apps only; never in documents, slides, cards or website media. */
+  --mq-space-1: 4px; /** Spacing step 1, 4 px. */
+  --mq-space-2: 8px; /** Spacing step 2, 8 px. */
+  --mq-space-3: 12px; /** Spacing step 3, 12 px. */
+  --mq-space-4: 16px; /** Spacing step 4, 16 px. */
+  --mq-space-5: 24px; /** Spacing step 5, 24 px. */
+  --mq-space-6: 32px; /** Spacing step 6, 32 px. */
+  --mq-space-7: 48px; /** Spacing step 7, 48 px. */
+  --mq-space-8: 72px; /** Spacing step 8, 72 px. */
+  --mq-stroke-hairline: 1px; /** Hairline borders and rules (increment 07 component need). */
+  --mq-stroke-strong: 2px; /** Strong rule, as above a total row (increment 07 component need). */
+  --mq-stroke-tab: 3px; /** Navy accent tab beside a callout or takeaway (increment 07 component need). */
+  --mq-shadow-small: 0px 1px 2px 0px rgba(0, 0, 0, 0.05); /** Cards (increment 07 component need). */
+  --mq-shadow-medium: 0px 3px 12px 0px rgba(0, 0, 0, 0.07); /** A slide or page previewed on the desk, never in print (increment 07 component need). */
+  --mq-shadow-panel: 0px 14px 36px 0px rgba(10, 36, 99, 0.24); /** Navy panels (increment 07 component need). */
+  --mq-slide-width: 1280px; /** Slide canvas width (increment 07 component need). */
+  --mq-slide-height: 720px; /** Slide canvas height (increment 07 component need). */
+  --mq-page-width: 1040px; /** Content width of a screen document (increment 07 component need). */
+  --mq-page-measure: 760px; /** Longest line of running text (increment 07 component need). */
+  --mq-a4-width: 793.7px; /** A4 sheet width (increment 07 component need). */
+  --mq-a4-height: 1122.52px; /** A4 sheet height (increment 07 component need). */
+  --mq-font-family-heading: Outfit, system-ui, -apple-system, 'Segoe UI', sans-serif; /** Headings, column titles and hero figures (Owner ruling 4, 2026-10-09, Owner ruling 10, 2026-10-09). */
+  --mq-font-family-body: Newsreader, Georgia, 'Times New Roman', serif; /** Body text of documents and slides, regulatory text in apps (Owner ruling 10, 2026-10-09). */
+  --mq-font-family-ui: Outfit, system-ui, -apple-system, 'Segoe UI', sans-serif; /** Labels and app UI (Owner ruling 10, 2026-10-09). */
+  --mq-font-family-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace; /** Figures and codes (Owner ruling 10, 2026-10-09). */
+  --mq-font-weight-heading: 500; /** Owner ruling 4, 2026-10-09: every heading, column title and hero figure. */
+  --mq-font-weight-emphasis: 600; /** Owner ruling 4, 2026-10-09: a short highlighted word inside body text, as the Med of the logo. */
+  --mq-font-weight-body: 400; /** Body text. */
+  --mq-font-weight-light: 300; /** Owner ruling 6, 2026-10-09: only the Quantis half of the wordmark; never for headings or body text. */
+  --mq-font-size-hero-min: 34px; /** Hero title at the narrowest viewport. */
+  --mq-font-size-hero-max: 56px; /** Hero title at the widest viewport. */
+  --mq-font-size-h2: 32px; /** Section title. */
+  --mq-font-size-h3: 20px; /** Subsection title. */
+  --mq-font-size-lead: 18px; /** Lead paragraph. */
+  --mq-font-size-body: 16.5px; /** Body text on screen. */
+  --mq-font-size-small: 15px; /** Small body text. */
+  --mq-font-size-label: 13px; /** Labels. */
+  --mq-font-size-eyebrow: 11px; /** Eyebrow above a title; 11 px is the floor for any text. */
+  --mq-font-size-figure: 50px; /** Hero figure. */
+  --mq-font-size-kpi: 30px; /** KPI value. */
+  --mq-font-size-stat: 24px; /** Statistic value. */
+  --mq-font-size-table-header: 11px; /** Table header cell. */
+  --mq-font-size-table-cell: 13px; /** Table cell with figures. */
+  --mq-font-size-table-text: 14px; /** Table cell with prose. */
+  --mq-font-size-takeaway: 16px; /** Takeaway line under a figure. */
+  --mq-font-size-note: 12.5px; /** Notes and sources. */
+  --mq-font-size-axis: 11px; /** Chart axis labels. */
+  --mq-font-size-slide-title: 36px; /** Slide title on the 1280 by 720 canvas (increment 07 component need). */
+}