/*
 * tokens.css  (design system v5)
 * Source: CE/design/v5/DESIGN-SYSTEM-SPEC.md (10 November 2026, Revision 4) and tokens/SPEC-RULINGS.md. Generated by build-tokens.mjs. Do not edit by hand.
 * Date: 10 November 2026.
 * 11 November 2026: surface, quiet-type and component-size tokens added from CE/design/v5/COMPONENTS-CODED.md (3.3, 3.4, 5 gap ruling 1).
 * DRAFT: nothing here is approved by the founder; several values are applied pending his answers in NEEDS-FOUNDER.md.
 * Marks (KEPT / CHANGED / NEW) are the specification's audit marks against design/tokens/dist/tokens.css (9 November).
 * Modes: :root and [data-theme="light"] = light screens; [data-theme="dark"] = near-black screens.
 * Roles without a dark value are set to initial in the dark block; white elements on dark carry data-theme="light".
 * Phone values apply below 768 px (max-width: 767px); the grid switches at 768, 1024, 1440 and 1920 (min-width).
 * Retired tokens (spec section 15) and the held status colours (spec 1.4) are not emitted.
 */

:root {

  /* Colour primitives (spec 1.1 to 1.3) */
  --p-color-neutral-0: #FFFFFF;  /* KEPT */
  --p-color-neutral-25: #FBFBFA;  /* NEW */
  --p-color-neutral-50: #F4F4F2;  /* CHANGED */
  --p-color-neutral-100: #EBEBE8;  /* CHANGED */
  --p-color-neutral-150: #E2E2DE;  /* CHANGED */
  --p-color-neutral-200: #D9D9D5;  /* CHANGED */
  --p-color-neutral-400: #787873;  /* CHANGED */
  --p-color-neutral-600: #656561;  /* CHANGED */
  --p-color-neutral-700: #4A4A47;  /* CHANGED */
  --p-color-neutral-900: #1A1A1A;  /* CHANGED */
  --p-color-dark-0: #111112;  /* NEW */
  --p-color-dark-50: #19191A;  /* NEW */
  --p-color-dark-100: #202022;  /* NEW */
  --p-color-dark-150: #2A2A2C;  /* NEW */
  --p-color-dark-200: #2C2C2E;  /* NEW */
  --p-color-dark-400: #727270;  /* NEW */
  --p-color-dark-600: #9A9A95;  /* NEW */
  --p-color-dark-700: #B4B4AF;  /* NEW */
  --p-color-dark-900: #F4F4F2;  /* NEW */
  --p-color-ring-blue: #0085FF;  /* KEPT */
  --p-color-blue-500: var(--p-color-ring-blue);  /* NEW (alias), Revision 4 */
  --p-color-blue-50: #EEF6FF;  /* NEW */
  --p-color-blue-100: #D9EBFF;  /* NEW */
  --p-color-blue-200: #B5D8FF;  /* NEW */
  --p-color-blue-600: #0071D9;  /* NEW */
  --p-color-blue-700: #005CB3;  /* NEW */
  --p-color-blue-400: #3D9EFF;  /* NEW */
  --p-color-blue-300: #7DBCFF;  /* NEW */
  --p-color-blue-900: #0B2846;  /* NEW */
  --p-color-ring-ink: #3F3F3F;  /* KEPT */

  /* Status colours (spec 1.4; the four held rows are not emitted) */
  --p-color-error: #B3261E;  /* NEW */
  --p-color-error-on-dark: #FF8A80;  /* NEW */

  /* Type families and weights (spec 3.1) */
  --p-font-family-display: "Source Serif 4", Georgia, "Times New Roman", serif;  /* KEPT */
  --p-font-family-working: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;  /* KEPT */
  --p-font-weight-regular: 400;  /* KEPT */
  --p-font-weight-medium: 500;  /* KEPT */

  /* Type styles, web desktop 1440 and web phone 390 (spec 3.2) */
  --type-display-1-family: var(--p-font-family-display);  /* CHANGED */
  --type-display-1-weight: 400;  /* CHANGED */
  --type-display-1-size-web-desktop: 64px;  /* CHANGED */
  --type-display-1-line-height-web-desktop: 1.04;  /* CHANGED */
  --type-display-1-tracking-web-desktop: -0.02em;  /* CHANGED */
  --type-display-1-size-web-phone: 40px;  /* CHANGED */
  --type-display-1-line-height-web-phone: 1.06;  /* CHANGED */
  --type-display-1-tracking-web-phone: -0.02em;  /* CHANGED */
  --type-display-2-family: var(--p-font-family-display);  /* CHANGED */
  --type-display-2-weight: 400;  /* CHANGED */
  --type-display-2-size-web-desktop: 48px;  /* CHANGED */
  --type-display-2-line-height-web-desktop: 1.06;  /* CHANGED */
  --type-display-2-tracking-web-desktop: -0.02em;  /* CHANGED */
  --type-display-2-size-web-phone: 32px;  /* CHANGED */
  --type-display-2-line-height-web-phone: 1.08;  /* CHANGED */
  --type-display-2-tracking-web-phone: -0.015em;  /* CHANGED */
  --type-display-3-family: var(--p-font-family-display);  /* CHANGED */
  --type-display-3-weight: 400;  /* CHANGED */
  --type-display-3-size-web-desktop: 36px;  /* CHANGED */
  --type-display-3-line-height-web-desktop: 1.1;  /* CHANGED */
  --type-display-3-tracking-web-desktop: -0.015em;  /* CHANGED */
  --type-display-3-size-web-phone: 28px;  /* KEPT */
  --type-display-3-line-height-web-phone: 1.1;  /* CHANGED */
  --type-display-3-tracking-web-phone: -0.01em;  /* CHANGED */
  --type-title-family: var(--p-font-family-display);  /* CHANGED */
  --type-title-weight: 400;  /* CHANGED */
  --type-title-size-web-desktop: 24px;  /* CHANGED */
  --type-title-line-height-web-desktop: 1.2;  /* CHANGED */
  --type-title-tracking-web-desktop: -0.01em;  /* CHANGED */
  --type-title-size-web-phone: 22px;  /* CHANGED */
  --type-title-line-height-web-phone: 1.2;  /* CHANGED */
  --type-title-tracking-web-phone: -0.01em;  /* CHANGED */
  --type-lead-family: var(--p-font-family-working);  /* KEPT */
  --type-lead-weight: 400;  /* KEPT */
  --type-lead-size-web-desktop: 20px;  /* KEPT */
  --type-lead-line-height-web-desktop: 1.45;  /* KEPT */
  --type-lead-tracking-web-desktop: 0;  /* KEPT */
  --type-lead-size-web-phone: 18px;  /* KEPT */
  --type-lead-line-height-web-phone: 1.5;  /* KEPT */
  --type-lead-tracking-web-phone: 0;  /* KEPT */
  --type-body-family: var(--p-font-family-working);  /* KEPT */
  --type-body-weight: 400;  /* KEPT */
  --type-body-size-web-desktop: 18px;  /* KEPT */
  --type-body-line-height-web-desktop: 1.55;  /* KEPT */
  --type-body-tracking-web-desktop: 0;  /* KEPT */
  --type-body-size-web-phone: 17px;  /* CHANGED */
  --type-body-line-height-web-phone: 1.55;  /* KEPT */
  --type-body-tracking-web-phone: 0;  /* KEPT */
  --type-panel-family: var(--p-font-family-working);  /* NEW */
  --type-panel-weight: 400;  /* NEW */
  --type-panel-size-web-desktop: 14px;  /* NEW */
  --type-panel-line-height-web-desktop: 1.45;  /* NEW */
  --type-panel-tracking-web-desktop: -0.005em;  /* NEW */
  --type-panel-size-web-phone: 14px;  /* NEW */
  --type-panel-line-height-web-phone: 1.45;  /* NEW */
  --type-panel-tracking-web-phone: -0.005em;  /* NEW */
  --type-panel-strong-family: var(--p-font-family-working);  /* NEW */
  --type-panel-strong-weight: 500;  /* NEW */
  --type-panel-strong-size-web-desktop: 14px;  /* NEW */
  --type-panel-strong-line-height-web-desktop: 1.45;  /* NEW */
  --type-panel-strong-tracking-web-desktop: -0.005em;  /* NEW */
  --type-panel-strong-size-web-phone: 14px;  /* NEW */
  --type-document-title-family: var(--p-font-family-display);  /* NEW */
  --type-document-title-weight: 400;  /* NEW */
  --type-document-title-size-web-desktop: 15px;  /* NEW, Revision 4 */
  --type-document-title-line-height-web-desktop: 1.3;  /* NEW */
  --type-document-title-tracking-web-desktop: 0;  /* NEW */
  --type-document-title-size-web-phone: 15px;  /* NEW */
  --type-document-line-family: var(--p-font-family-working);  /* NEW */
  --type-document-line-weight: 400;  /* NEW */
  --type-document-line-size-web-desktop: 13px;  /* NEW */
  --type-document-line-line-height-web-desktop: 1.5;  /* NEW */
  --type-document-line-tracking-web-desktop: 0;  /* NEW */
  --type-document-line-size-web-phone: 13px;  /* NEW */
  --type-caption-family: var(--p-font-family-working);  /* KEPT */
  --type-caption-weight: 400;  /* KEPT */
  --type-caption-size-web-desktop: 15px;  /* KEPT */
  --type-caption-line-height-web-desktop: 1.45;  /* KEPT */
  --type-caption-tracking-web-desktop: 0;  /* KEPT */
  --type-caption-size-web-phone: 15px;  /* KEPT */
  --type-chip-family: var(--p-font-family-working);  /* CHANGED */
  --type-chip-weight: 500;  /* CHANGED */
  --type-chip-size-web-desktop: 13px;  /* CHANGED */
  --type-chip-line-height-web-desktop: 1.0;  /* CHANGED */
  --type-chip-tracking-web-desktop: 0;  /* CHANGED */
  --type-chip-size-web-phone: 13px;  /* CHANGED */
  --type-action-family: var(--p-font-family-working);  /* CHANGED */
  --type-action-weight: 500;  /* CHANGED */
  --type-action-size-web-desktop: 15px;  /* CHANGED */
  --type-action-line-height-web-desktop: 1.2;  /* CHANGED */
  --type-action-tracking-web-desktop: 0;  /* CHANGED */
  --type-action-size-web-phone: 15px;  /* CHANGED */

  /* Type sizes for other formats (spec 3.3; sizes only) */
  --type-display-1-size-carousel: 132px;  /* KEPT */
  --type-display-1-size-reel: 132px;  /* KEPT */
  --type-display-1-size-document: 53.33px;  /* KEPT, Revision 4 */
  --type-display-1-size-deck: 112px;  /* KEPT */
  --type-display-2-size-carousel: 96px;  /* KEPT */
  --type-display-2-size-reel: 104px;  /* KEPT */
  --type-display-2-size-document: 37.33px;  /* KEPT, Revision 4 */
  --type-display-2-size-deck: 80px;  /* KEPT */
  --type-title-size-carousel: 70px;  /* KEPT */
  --type-title-size-reel: 84px;  /* KEPT */
  --type-title-size-document: 26.67px;  /* KEPT, Revision 4 */
  --type-title-size-deck: 56px;  /* KEPT */
  --type-title-size-film: 96px;  /* KEPT */
  --type-lead-size-document: 17.33px;  /* KEPT, Revision 4 */
  --type-lead-size-deck: 36px;  /* KEPT */
  --type-body-size-carousel: 46px;  /* KEPT */
  --type-body-size-reel: 48px;  /* KEPT */
  --type-body-size-document: 14.67px;  /* KEPT, Revision 4 */
  --type-body-size-deck: 30px;  /* KEPT */
  --type-subtitle-size-reel: 56px;  /* KEPT */
  --type-subtitle-weight: 500;  /* KEPT */
  --type-subtitle-size-film: 44px;  /* KEPT */
  --type-caption-size-carousel: 38px;  /* KEPT */
  --type-caption-size-reel: 40px;  /* KEPT */
  --type-caption-size-document: 12px;  /* KEPT, Revision 4 */
  --type-caption-size-deck: 24px;  /* KEPT */
  --type-caption-size-film: 32px;  /* KEPT */
  --type-chip-size-carousel: 34px;  /* CHANGED */
  --type-chip-size-reel: 36px;  /* CHANGED */
  --type-chip-size-document: 11.33px;  /* CHANGED, Revision 4 */
  --type-chip-size-deck: 22px;  /* CHANGED */
  --type-chip-size-film: 26px;  /* CHANGED */
  --type-panel-size-carousel: 34px;  /* NEW */
  --type-panel-size-reel: 36px;  /* NEW */
  --type-panel-size-document: 10px;  /* NEW, Revision 4 */
  --type-panel-size-deck: 22px;  /* NEW */
  --type-panel-size-film: 26px;  /* NEW */

  /* Spacing (spec 4) */
  --p-space-0: 0px;  /* KEPT */
  --p-space-1: 4px;  /* KEPT */
  --p-space-2: 8px;  /* KEPT */
  --p-space-3: 12px;  /* KEPT */
  --p-space-4: 16px;  /* KEPT */
  --p-space-5: 24px;  /* KEPT */
  --p-space-6: 32px;  /* KEPT */
  --p-space-7: 48px;  /* KEPT */
  --p-space-8: 64px;  /* KEPT */
  --p-space-9: 96px;  /* KEPT */
  --p-space-10: 128px;  /* KEPT */
  --p-space-11: 176px;  /* KEPT */
  --p-space-12: 240px;  /* KEPT */
  --p-space-13: 320px;  /* KEPT */
  --space-section: 240px;  /* KEPT */
  --space-headline-gap: 96px;  /* CHANGED */
  --space-gutter: 24px;  /* KEPT */
  --space-margin: 48px;  /* KEPT */
  --space-well-inset: 24px;  /* NEW */
  --space-well-inset-phone: 16px;  /* NEW */
  --space-bento-gap: 12px;  /* NEW */
  --space-panel-pad: 20px;  /* NEW */
  --space-panel-pad-phone: 16px;  /* NEW */
  --space-chip-gap: 8px;  /* NEW */

  /* Radius (spec 5) */
  --p-radius-none: 0px;  /* KEPT */
  --p-radius-doc: 4px;  /* CHANGED */
  --p-radius-inner: 8px;  /* NEW */
  --p-radius-input: 10px;  /* NEW */
  --p-radius-panel: 14px;  /* CHANGED */
  --p-radius-panel-phone: 12px;  /* CHANGED */
  --p-radius-well: 20px;  /* NEW */
  --p-radius-well-phone: 16px;  /* NEW */
  --p-radius-pill: 999px;  /* NEW */
  --c-button-radius: 999px;  /* CHANGED */

  /* Borders and focus (spec 6) */
  --p-border-width-hairline: 1px;  /* KEPT */
  --p-border-width-focus: 2px;  /* KEPT */
  --c-focus-offset: 3px;  /* KEPT */
  --p-border-width-edge: 2px;  /* CHANGED */
  --p-border-width-line: 1.5px;  /* NEW */

  /* Shadows (spec 7) */
  --shadow-rest: 0 1px 2px rgba(26,26,26,0.06);  /* NEW */
  --shadow-raised: 0 1px 2px rgba(26,26,26,0.05), 0 10px 24px -8px rgba(26,26,26,0.12);  /* NEW */
  --shadow-chip: 0 1px 2px rgba(26,26,26,0.06), 0 6px 14px -6px rgba(26,26,26,0.14);  /* NEW */
  --shadow-overlay: 0 2px 4px rgba(26,26,26,0.05), 0 18px 32px -14px rgba(26,26,26,0.18);  /* NEW */
  --shadow-on-dark: 0 1px 0 rgba(0,0,0,0.4), 0 16px 32px -12px rgba(0,0,0,0.6);  /* NEW */

  /* Blur (spec 8) */
  --blur-chip: blur(12px);  /* NEW */

  /* Opacity (spec 9) */
  --opacity-inactive-light: 0.8;  /* NEW */
  --opacity-inactive-dark: 0.72;  /* NEW */
  --opacity-nav: 1;  /* NEW */

  /* Z-order (spec 10) */
  --z-ground: 0;  /* NEW */
  --z-well: 1;  /* NEW */
  --z-imagery: 2;  /* NEW */
  --z-panel: 3;  /* NEW */
  --z-panel-current: 4;  /* NEW */
  --z-chip: 5;  /* NEW */
  --z-overlay: 6;  /* NEW */
  --z-pause: 7;  /* NEW */
  --z-nav: 10;  /* NEW */

  /* Grid (spec 11); the breakpoint widths 768, 1024, 1440 and 1920 appear only in the media queries at the end */
  --grid-1920-columns: 12;  /* KEPT */
  --grid-1920-gutter: 24px;  /* KEPT */
  --grid-1920-margin: auto;  /* KEPT; auto = centred: valid as margin, never as padding; apply with margin-inline */
  --grid-1920-content-max: 1344px;  /* KEPT */
  --grid-1440-columns: 12;  /* KEPT */
  --grid-1440-gutter: 24px;  /* KEPT */
  --grid-1440-margin: 48px;  /* KEPT */
  --grid-1440-content-max: 1344px;  /* KEPT */
  --grid-1024-columns: 12;  /* CHANGED */
  --grid-1024-gutter: 20px;  /* CHANGED */
  --grid-1024-margin: 32px;  /* CHANGED */
  --grid-1024-content-max: 960px;  /* CHANGED */
  --grid-768-columns: 8;  /* KEPT */
  --grid-768-gutter: 16px;  /* KEPT */
  --grid-768-margin: 32px;  /* KEPT */
  --grid-768-content-max: 704px;  /* KEPT */
  --grid-390-columns: 4;  /* KEPT */
  --grid-390-gutter: 12px;  /* KEPT */
  --grid-390-margin: 16px;  /* KEPT */
  --grid-390-content-max: 358px;  /* KEPT */

  /* Chip tokens (spec 14.3) */
  --c-chip-height: 28px;  /* NEW, Revision 4 */
  --c-chip-pad-x: var(--p-space-3);  /* NEW, Revision 4 */
  --c-chip-max-width: 220px;  /* NEW, Revision 4 */
  --c-chip-max-height: 36px;  /* NEW, Revision 4 */

  /* Motion: easings (spec 12) */
  --p-easing-out: cubic-bezier(0.19, 1, 0.22, 1);  /* KEPT */
  --p-easing-exit: cubic-bezier(0.7, 0, 0.84, 0);  /* KEPT */
  --p-easing-run: cubic-bezier(0, 0, 1, 1);  /* KEPT */
  --p-easing-in-out: cubic-bezier(0.65, 0, 0.35, 1);  /* NEW */

  /* Motion: durations (spec 12) */
  --p-duration-instant: 0ms;  /* KEPT */
  --p-duration-micro: 120ms;  /* CHANGED */
  --p-duration-short: 200ms;  /* CHANGED */
  --p-duration-medium: 320ms;  /* KEPT */
  --p-duration-long: 480ms;  /* CHANGED */
  --p-duration-reveal: 640ms;  /* CHANGED */
  --p-duration-build: 900ms;  /* NEW */
  --p-duration-hold: 600ms;  /* KEPT */

  /* Motion: distances and stagger (spec 12) */
  --p-distance-reveal: 48px;  /* KEPT */
  --p-distance-panel: 16px;  /* NEW */
  --p-distance-hover: 2px;  /* NEW */
  --p-distance-press: 1px;  /* KEPT */
  --p-distance-pointer-max: 6px;  /* NEW */
  --p-stagger: 60ms;  /* KEPT */

  /* Motion: loops, triggers, pinning (spec 12) */
  --loop-hero: 16s;  /* NEW */
  --loop-integrations: 22s;  /* NEW */
  --loop-search: 12s;  /* NEW */
  --loop-connected: 18s;  /* NEW */
  --loop-rest-min: 2s;  /* NEW */
  --loop-in-view: 0.25;  /* NEW */
  --build-trigger: 0.6;  /* NEW */
  --reveal-trigger: 80%;  /* NEW */
  --pin-beat: 600px;  /* NEW */
  --pin-dead-band: 120px;  /* NEW */

  /* Type: the two quiet headline styles (COMPONENTS-CODED 3.4; added 11 November 2026) */
  --type-display-1-quiet-family: var(--p-font-family-working);  /* NEW; COMPONENTS-CODED.md line 140 */
  --type-display-1-quiet-weight: 400;  /* NEW; COMPONENTS-CODED.md line 140 */
  --type-display-1-quiet-size-web-desktop: 60px;  /* NEW; COMPONENTS-CODED.md line 140 */
  --type-display-1-quiet-line-height-web-desktop: 1.04;  /* NEW; COMPONENTS-CODED.md line 140 */
  --type-display-1-quiet-tracking-web-desktop: -0.035em;  /* NEW; COMPONENTS-CODED.md line 140 */
  --type-display-1-quiet-size-web-phone: 38px;  /* NEW; COMPONENTS-CODED.md line 140 */
  --type-display-2-quiet-family: var(--p-font-family-working);  /* NEW; COMPONENTS-CODED.md line 140 */
  --type-display-2-quiet-weight: 400;  /* NEW; COMPONENTS-CODED.md line 140 */
  --type-display-2-quiet-size-web-desktop: 45px;  /* NEW; COMPONENTS-CODED.md line 140 */
  --type-display-2-quiet-tracking-web-desktop: -0.03em;  /* NEW; COMPONENTS-CODED.md line 140 */
  --type-display-2-quiet-size-web-phone: 30px;  /* NEW; COMPONENTS-CODED.md line 140 */

  /* Component sizes (COMPONENTS-CODED 5, gap ruling 1; added 11 November 2026) */
  --c-mark-cell: 88px;  /* NEW; COMPONENTS-CODED.md line 298 */
  --c-mark-size: 40px;  /* NEW; COMPONENTS-CODED.md line 298 */
  --c-step-row-height: 40px;  /* NEW; COMPONENTS-CODED.md line 298 */
  --c-pause-width: 72px;  /* NEW; COMPONENTS-CODED.md line 298 */
  --c-nav-height: 72px;  /* NEW; COMPONENTS-CODED.md line 298 */

  /* Type: instrument title and small document lines (FIX-NOTES; DIFF-additions section H; added 11 November 2026) */
  --type-instrument-title-size-web-desktop: 19px;  /* NEW; DIFF-additions-2026-11-11.md line 97 */
  --type-instrument-title-size-web-phone: 17px;  /* NEW; DIFF-additions-2026-11-11.md line 98 */
  --type-document-small-size-web-desktop: 12px;  /* NEW; DIFF-additions-2026-11-11.md line 99 */
  --type-document-small-line-height-web-desktop: 1.4;  /* NEW; DIFF-additions-2026-11-11.md line 100 */

  /* The deepened language: modular type scale, small capitals, figures, radius by role, line weights, mark sizes (DEC 79; DIFF-additions section I; added 11 November 2026) */
  --type-scale-ratio: 1.333;  /* NEW; DIFF-additions-2026-11-11.md line 122 */
  --type-step-minus-1: 12px;  /* NEW; DIFF-additions-2026-11-11.md line 123 */
  --type-step-0: 16px;  /* NEW; DIFF-additions-2026-11-11.md line 124 */
  --type-step-1: 21px;  /* NEW; DIFF-additions-2026-11-11.md line 125 */
  --type-step-2: 28px;  /* NEW; DIFF-additions-2026-11-11.md line 126 */
  --type-step-3: 38px;  /* NEW; DIFF-additions-2026-11-11.md line 127 */
  --type-step-4: 50px;  /* NEW; DIFF-additions-2026-11-11.md line 128 */
  --type-step-5: 64px;  /* NEW; DIFF-additions-2026-11-11.md line 129 */
  --type-leading-minus-1: 16px;  /* NEW; DIFF-additions-2026-11-11.md line 130 */
  --type-leading-0: 24px;  /* NEW; DIFF-additions-2026-11-11.md line 131 */
  --type-leading-1: 28px;  /* NEW; DIFF-additions-2026-11-11.md line 132 */
  --type-leading-2: 32px;  /* NEW; DIFF-additions-2026-11-11.md line 133 */
  --type-leading-3: 44px;  /* NEW; DIFF-additions-2026-11-11.md line 134 */
  --type-leading-4: 52px;  /* NEW; DIFF-additions-2026-11-11.md line 135 */
  --type-baseline: 4px;  /* NEW; DIFF-additions-2026-11-11.md line 136 */
  --type-smallcaps-family: "Source Serif 4", Georgia, "Times New Roman", serif;  /* NEW; DIFF-additions-2026-11-11.md line 137 */
  --type-smallcaps-size: 16px;  /* NEW; DIFF-additions-2026-11-11.md line 138 */
  --type-smallcaps-weight: 500;  /* NEW; DIFF-additions-2026-11-11.md line 139 */
  --type-smallcaps-tracking: 0.06em;  /* NEW; DIFF-additions-2026-11-11.md line 140 */
  --type-smallcaps-features: "smcp" 1, "lnum" 1;  /* NEW; DIFF-additions-2026-11-11.md line 141 */
  --type-figures-tabular: "tnum" 1, "lnum" 1;  /* NEW; DIFF-additions-2026-11-11.md line 142 */
  --type-figures-oldstyle: "onum" 1, "pnum" 1;  /* NEW; DIFF-additions-2026-11-11.md line 143 */
  --radius-paper: 2px;  /* NEW; DIFF-additions-2026-11-11.md line 144 */
  --radius-instrument: 8px;  /* NEW; DIFF-additions-2026-11-11.md line 145 */
  --radius-region: 0px;  /* NEW; DIFF-additions-2026-11-11.md line 146 */
  --radius-control: 999px;  /* NEW; DIFF-additions-2026-11-11.md line 147 */
  --line-construction: 1px;  /* NEW; DIFF-additions-2026-11-11.md line 148 */
  --line-structure: 1.5px;  /* NEW; DIFF-additions-2026-11-11.md line 149 */
  --line-route: 3px;  /* NEW; DIFF-additions-2026-11-11.md line 150 */
  --size-mark: 10px;  /* NEW; DIFF-additions-2026-11-11.md line 151 */
  --size-station: 14px;  /* NEW; DIFF-additions-2026-11-11.md line 152 */
}

/* Colour roles: light screens (spec 2.1) */
:root,
[data-theme="light"] {
  --color-surface-page: var(--p-color-neutral-50);  /* CHANGED */
  --color-surface-well: var(--p-color-neutral-100);  /* NEW */
  --color-surface-well-deep: var(--p-color-neutral-150);  /* NEW */
  --color-surface-panel: var(--p-color-neutral-0);  /* CHANGED */
  --color-surface-raised: var(--p-color-neutral-25);  /* NEW */
  --color-surface-sheet: #FFFFFF;  /* KEPT */
  --color-text-primary: #1A1A1A;  /* CHANGED */
  --color-text-secondary: #4A4A47;  /* CHANGED */
  --color-text-tertiary: #656561;  /* NEW */
  --color-line-ui: #787873;  /* NEW */
  --color-line-hairline: #D9D9D5;  /* NEW */
  --color-panel-border: rgba(26,26,26,0.08);  /* NEW */
  --color-accent: #0085FF;  /* NEW */
  --color-accent-hover: #0071D9;  /* NEW */
  --color-accent-text: #005CB3;  /* NEW */
  --color-source-fill: #D9EBFF;  /* NEW */
  --color-reading-fill: #B5D8FF;  /* NEW */
  --color-person-fill: #D9EBFF;  /* NEW */
  --color-person-edge: #0085FF;  /* NEW */
  --color-held-edge: #1A1A1A;  /* NEW */
  --color-action-primary-bg: #1A1A1A;  /* CHANGED */
  --color-action-primary-text: #FFFFFF;  /* KEPT */
  --color-action-secondary-bg: #FFFFFF;  /* NEW */
  --color-action-secondary-line: #787873;  /* CHANGED */
  --color-focus-ring: #0071D9;  /* CHANGED */
  --color-mark-integration: #1A1A1A;  /* NEW */
  --color-chip-glass: rgba(255,255,255,0.78);  /* NEW */
  --color-error: #B3261E;  /* NEW */
  --color-chip-border: rgba(26,26,26,0.06);  /* NEW */
  --color-input-border: #787873;  /* NEW */

  /* Surfaces, light values (COMPONENTS-CODED 3.3, and the drawing tokens of DIFF-additions section H; added 11 November 2026) */
  --color-glass: rgba(255,255,255,0.66);  /* NEW; COMPONENTS-CODED.md line 120 */
  --color-glass-border: rgba(26,26,26,0.07);  /* NEW; COMPONENTS-CODED.md line 121 */
  --shadow-glass-edge: inset 0 1px 0 rgba(255,255,255,0.9);  /* NEW; COMPONENTS-CODED.md line 122 */
  --blur-glass: blur(20px) saturate(1.15);  /* NEW; COMPONENTS-CODED.md line 123 */
  --shadow-stack: 0 1px 1px rgba(26,26,26,0.03), 0 2px 4px rgba(26,26,26,0.03), 0 4px 8px rgba(26,26,26,0.03), 0 8px 16px rgba(26,26,26,0.03), 0 16px 32px rgba(26,26,26,0.03), 0 32px 64px rgba(26,26,26,0.03);  /* NEW; COMPONENTS-CODED.md line 124 */
  --shadow-stack-raised: 0 1px 1px rgba(26,26,26,0.045), 0 2px 4px rgba(26,26,26,0.045), 0 4px 8px rgba(26,26,26,0.045), 0 8px 16px rgba(26,26,26,0.045), 0 16px 32px rgba(26,26,26,0.045), 0 32px 64px rgba(26,26,26,0.045);  /* NEW; COMPONENTS-CODED.md line 125 */
  --color-spine: rgba(26,26,26,0.10);  /* NEW; COMPONENTS-CODED.md line 126 */
  --color-frame-dash: #c9c9c4;  /* NEW; COMPONENTS-CODED.md line 127 */
  --color-docmark: rgba(74,74,71,0.28);  /* NEW; COMPONENTS-CODED.md line 128 */
  --bloom-blue: radial-gradient(closest-side, rgba(0,133,255,0.20), rgba(0,133,255,0));  /* NEW; COMPONENTS-CODED.md line 129 */
  --glow-blue: drop-shadow(0 0 4px rgba(0,133,255,0.45));  /* NEW; COMPONENTS-CODED.md line 130 */
  --fade-to-ground: linear-gradient(to bottom, transparent, var(--color-surface-page));  /* NEW; COMPONENTS-CODED.md line 131 */
  --color-sheet-minor: rgba(26,26,26,0.035);  /* NEW; DIFF-additions-2026-11-11.md line 61 */
  --color-sheet-major: rgba(26,26,26,0.06);  /* NEW; DIFF-additions-2026-11-11.md line 62 */
  --color-sheet-cross: rgba(26,26,26,0.22);  /* NEW; DIFF-additions-2026-11-11.md line 63 */
  --color-tick: rgba(26,26,26,0.38);  /* NEW; DIFF-additions-2026-11-11.md line 64 */
  --color-archive-page: #fbfbfa;  /* NEW; DIFF-additions-2026-11-11.md line 65 */
  --color-archive-under: #f1f1ee;  /* NEW; DIFF-additions-2026-11-11.md line 66 */
  --color-archive-edge: rgba(26,26,26,0.10);  /* NEW; DIFF-additions-2026-11-11.md line 67 */
  --color-archive-ink: rgba(26,26,26,0.30);  /* NEW; DIFF-additions-2026-11-11.md line 68 */
  --color-archive-bar: rgba(26,26,26,0.16);  /* NEW; DIFF-additions-2026-11-11.md line 69 */
  --color-archive-rule: rgba(26,26,26,0.07);  /* NEW; DIFF-additions-2026-11-11.md line 70 */
  --color-wire-rest: rgba(26,26,26,0.34);  /* NEW; DIFF-additions-2026-11-11.md line 71 */
  --color-wire-joint: rgba(26,26,26,0.34);  /* NEW; DIFF-additions-2026-11-11.md line 72 */
  --color-paper: #ffffff;  /* NEW; DIFF-additions-2026-11-11.md line 73 */
  --color-paper-under: #f7f7f5;  /* NEW; DIFF-additions-2026-11-11.md line 74 */
  --shadow-paper: 0 0 0 1px rgba(26,26,26,0.07), 0 1px 1px rgba(26,26,26,0.04), 0 2px 4px rgba(26,26,26,0.035), 0 6px 12px rgba(26,26,26,0.035), 0 14px 28px rgba(26,26,26,0.04);  /* NEW; DIFF-additions-2026-11-11.md line 75 */
  --shadow-paper-raised: 0 0 0 1px rgba(26,26,26,0.08), 0 1px 1px rgba(26,26,26,0.05), 0 3px 6px rgba(26,26,26,0.05), 0 8px 16px rgba(26,26,26,0.05), 0 18px 36px rgba(26,26,26,0.06), 0 36px 72px -16px rgba(26,26,26,0.10);  /* NEW; DIFF-additions-2026-11-11.md line 76 */
  --shadow-paper-under: 0 0 0 1px rgba(26,26,26,0.07), 0 1px 2px rgba(26,26,26,0.04);  /* NEW; DIFF-additions-2026-11-11.md line 77 */
  --color-instrument: linear-gradient(180deg, rgba(33,33,35,0.87), rgba(20,20,21,0.88) 38%, rgba(17,17,18,0.89));  /* NEW; DIFF-additions-2026-11-11.md line 78 */
  --blur-instrument: blur(3px) saturate(1.1);  /* NEW; DIFF-additions-2026-11-11.md line 79 */
  --edge-instrument: linear-gradient(180deg, rgba(244,244,242,0.20), rgba(244,244,242,0.06) 40%, rgba(244,244,242,0.03));  /* NEW; DIFF-additions-2026-11-11.md line 80 */
  --shadow-instrument: 0 0 0 1px rgba(17,17,18,0.9), 0 1px 1px rgba(26,26,26,0.06), 0 2px 4px rgba(26,26,26,0.06), 0 4px 8px rgba(26,26,26,0.06), 0 8px 16px rgba(26,26,26,0.06), 0 16px 32px rgba(26,26,26,0.07), 0 40px 80px -24px rgba(26,26,26,0.22);  /* NEW; DIFF-additions-2026-11-11.md line 81 */
  --color-instrument-row: rgba(26,26,26,0.04);  /* NEW; DIFF-additions-2026-11-11.md line 82 */
  --color-instrument-row-edge: rgba(26,26,26,0.06);  /* NEW; DIFF-additions-2026-11-11.md line 83 */
  --color-instrument-cite: rgba(0,133,255,0.14);  /* NEW; DIFF-additions-2026-11-11.md line 84 */
  --shadow-well-inset: inset 0 0 0 1px rgba(26,26,26,0.05), inset 0 1px 0 rgba(255,255,255,0.75), inset 0 -16px 32px -20px rgba(26,26,26,0.08);  /* NEW; DIFF-additions-2026-11-11.md line 85 */
  --light-well: radial-gradient(70% 55% at 12% -6%, rgba(255,255,255,0.9), rgba(255,255,255,0) 70%), radial-gradient(46% 42% at 58% 44%, rgba(255,255,255,0.55), rgba(255,255,255,0) 72%), radial-gradient(120% 90% at 50% 50%, rgba(26,26,26,0) 62%, rgba(26,26,26,0.05) 100%);  /* NEW; DIFF-additions-2026-11-11.md line 86 */
  --bloom-person: radial-gradient(closest-side, rgba(0,133,255,0.26), rgba(0,133,255,0));  /* NEW; DIFF-additions-2026-11-11.md line 87 */
  --color-tray: rgba(26,26,26,0.035);  /* NEW; DIFF-additions-2026-11-11.md line 88 */
  --color-instrument-dot: rgba(244,244,242,0.07);  /* NEW; DIFF-additions-2026-11-11.md line 89 */
  --color-tray-shade: rgba(26,26,26,0.06);  /* NEW; DIFF-additions-2026-11-11.md line 90 */
  --color-tray-edge: rgba(26,26,26,0.05);  /* NEW; DIFF-additions-2026-11-11.md line 91 */
  --elevation-paper: 0 1px 1px rgba(26,26,26,0.06), 0 2px 5px rgba(26,26,26,0.05), 0 12px 24px -8px rgba(26,26,26,0.12);  /* NEW; DIFF-additions-2026-11-11.md line 110 */
  --elevation-paper-read: 0 1px 1px rgba(26,26,26,0.07), 0 6px 12px rgba(26,26,26,0.06), 0 28px 48px -14px rgba(26,26,26,0.20);  /* NEW; DIFF-additions-2026-11-11.md line 111 */
  --color-line-construction: rgba(26,26,26,0.14);  /* NEW; DIFF-additions-2026-11-11.md line 112 */
  --color-line-structure: #1a1a1a;  /* NEW; DIFF-additions-2026-11-11.md line 113 */
  --color-route: #0085ff;  /* NEW; DIFF-additions-2026-11-11.md line 114 */
  --color-route-quiet: #b5d8ff;  /* NEW; DIFF-additions-2026-11-11.md line 115 */
  --color-region-tint: rgba(26,26,26,0.03);  /* NEW; DIFF-additions-2026-11-11.md line 116 */
  --color-accent-2: #C8372D;  /* NEW; ACCENT-2026-11-13.md line 7 */
  --color-accent-2-text: #A82A1F;  /* NEW; ACCENT-2026-11-13.md line 8 */
  --color-accent-2-pale: #F7E4E1;  /* NEW; ACCENT-2026-11-13.md line 9 */
}

/* Colour roles: near-black screens (spec 2.2). initial = NOT AVAILABLE ON DARK: a use inside a dark scope paints nothing. */
[data-theme="dark"] {
  --color-surface-page: #111112;  /* CHANGED */
  --color-surface-well: #19191A;  /* NEW */
  --color-surface-well-deep: initial;  /* NEW, Revision 4 */
  --color-surface-panel: #FFFFFF;  /* CHANGED */
  --color-surface-chrome: #202022;  /* NEW */
  --color-surface-raised: #2A2A2C;  /* NEW */
  --color-surface-sheet: initial;  /* NEW, Revision 4 */
  --color-text-primary: #F4F4F2;  /* CHANGED */
  --color-text-secondary: #B4B4AF;  /* CHANGED */
  --color-text-tertiary: #9A9A95;  /* NEW */
  --color-line-ui: #727270;  /* NEW */
  --color-line-hairline: #2C2C2E;  /* NEW */
  --color-panel-border: rgba(244,244,242,0.08);  /* NEW */
  --color-accent: #0085FF;  /* NEW */
  --color-accent-hover: #3D9EFF;  /* NEW */
  --color-accent-text: #7DBCFF;  /* NEW */
  --color-source-fill: initial;  /* NEW, Revision 4 */
  --color-reading-fill: initial;  /* NEW, Revision 4 */
  --color-person-fill: #0B2846;  /* NEW */
  --color-person-edge: #0085FF;  /* NEW */
  --color-held-edge: initial;  /* NEW, Revision 4 */
  --color-action-primary-bg: #FFFFFF;  /* NEW */
  --color-action-primary-text: #1A1A1A;  /* NEW */
  --color-action-secondary-bg: #202022;  /* NEW, Revision 4 */
  --color-action-secondary-line: #727270;  /* NEW, Revision 4 */
  --color-focus-ring: #3D9EFF;  /* CHANGED */
  --color-mark-integration: initial;  /* NEW, Revision 4 */
  --color-chip-glass: rgba(32,32,34,0.80);  /* NEW */
  --color-error: #FF8A80;  /* NEW */
  --color-chip-border: rgba(244,244,242,0.08);  /* NEW, Revision 4; decorative by the director ruling (SPEC-RULINGS): no contrast duty */
  --color-input-border: #727270;  /* NEW, Revision 4 */

  /* Surfaces, dark values (COMPONENTS-CODED 3.3, and the drawing tokens of DIFF-additions section H; added 11 November 2026) */
  --color-glass: rgba(32,32,34,0.56);  /* NEW; COMPONENTS-CODED.md line 120 */
  --color-glass-border: rgba(244,244,242,0.12);  /* NEW; COMPONENTS-CODED.md line 121 */
  --shadow-glass-edge: inset 0 1px 0 rgba(244,244,242,0.06);  /* NEW; COMPONENTS-CODED.md line 122 */
  --blur-glass: blur(32px) saturate(1.1);  /* NEW; COMPONENTS-CODED.md line 123 */
  --shadow-stack: 0 1px 1px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.12), 0 16px 32px rgba(0,0,0,0.12), 0 32px 64px rgba(0,0,0,0.12);  /* NEW; COMPONENTS-CODED.md line 124 */
  --shadow-stack-raised: 0 1px 1px rgba(0,0,0,0.18), 0 2px 4px rgba(0,0,0,0.18), 0 4px 8px rgba(0,0,0,0.18), 0 8px 16px rgba(0,0,0,0.18), 0 16px 32px rgba(0,0,0,0.18), 0 32px 64px rgba(0,0,0,0.18);  /* NEW; COMPONENTS-CODED.md line 125 */
  --color-spine: rgba(244,244,242,0.10);  /* NEW; COMPONENTS-CODED.md line 126 */
  --color-frame-dash: #3a3a3c;  /* NEW; COMPONENTS-CODED.md line 127 */
  --color-docmark: rgba(244,244,242,0.18);  /* NEW; COMPONENTS-CODED.md line 128 */
  --bloom-blue: radial-gradient(closest-side, rgba(0,133,255,0.30), rgba(0,133,255,0));  /* NEW; COMPONENTS-CODED.md line 129 */
  --glow-blue: drop-shadow(0 0 6px rgba(0,133,255,0.6));  /* NEW; COMPONENTS-CODED.md line 130 */
  --fade-to-ground: linear-gradient(to bottom, transparent, var(--color-surface-page));  /* NEW; COMPONENTS-CODED.md line 131 */
  --color-action-inverse-bg: #ffffff;  /* NEW; COMPONENTS-CODED.md line 132 */
  --color-action-inverse-text: #1a1a1a;  /* NEW; COMPONENTS-CODED.md line 132 */
  --color-sheet-minor: rgba(244,244,242,0.03);  /* NEW; DIFF-additions-2026-11-11.md line 61 */
  --color-sheet-major: rgba(244,244,242,0.05);  /* NEW; DIFF-additions-2026-11-11.md line 62 */
  --color-sheet-cross: rgba(244,244,242,0.18);  /* NEW; DIFF-additions-2026-11-11.md line 63 */
  --color-tick: rgba(244,244,242,0.34);  /* NEW; DIFF-additions-2026-11-11.md line 64 */
  --color-archive-page: #26262a;  /* NEW; DIFF-additions-2026-11-11.md line 65 */
  --color-archive-under: #202023;  /* NEW; DIFF-additions-2026-11-11.md line 66 */
  --color-archive-edge: rgba(244,244,242,0.10);  /* NEW; DIFF-additions-2026-11-11.md line 67 */
  --color-archive-ink: rgba(244,244,242,0.32);  /* NEW; DIFF-additions-2026-11-11.md line 68 */
  --color-archive-bar: rgba(244,244,242,0.16);  /* NEW; DIFF-additions-2026-11-11.md line 69 */
  --color-archive-rule: rgba(244,244,242,0.06);  /* NEW; DIFF-additions-2026-11-11.md line 70 */
  --color-wire-rest: rgba(244,244,242,0.30);  /* NEW; DIFF-additions-2026-11-11.md line 71 */
  --color-wire-joint: rgba(244,244,242,0.32);  /* NEW; DIFF-additions-2026-11-11.md line 72 */
  --color-paper: #ffffff;  /* NEW; DIFF-additions-2026-11-11.md line 73 */
  --color-paper-under: #e9e9e6;  /* NEW; DIFF-additions-2026-11-11.md line 74 */
  --shadow-paper: 0 0 0 1px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.25), 0 8px 16px rgba(0,0,0,0.25), 0 20px 40px rgba(0,0,0,0.3);  /* NEW; DIFF-additions-2026-11-11.md line 75 */
  --shadow-paper-raised: 0 0 0 1px rgba(0,0,0,0.5), 0 3px 6px rgba(0,0,0,0.3), 0 10px 20px rgba(0,0,0,0.3), 0 28px 56px rgba(0,0,0,0.35);  /* NEW; DIFF-additions-2026-11-11.md line 76 */
  --shadow-paper-under: 0 0 0 1px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.3);  /* NEW; DIFF-additions-2026-11-11.md line 77 */
  --color-instrument: linear-gradient(180deg, rgba(34,34,36,0.86), rgba(14,14,15,0.88) 40%);  /* NEW; DIFF-additions-2026-11-11.md line 78 */
  --blur-instrument: blur(14px) saturate(1.2);  /* NEW; DIFF-additions-2026-11-11.md line 79 */
  --edge-instrument: linear-gradient(180deg, rgba(244,244,242,0.22), rgba(244,244,242,0.07) 40%, rgba(244,244,242,0.04));  /* NEW; DIFF-additions-2026-11-11.md line 80 */
  --shadow-instrument: 0 0 0 1px rgba(0,0,0,0.6), 0 2px 4px rgba(0,0,0,0.3), 0 8px 16px rgba(0,0,0,0.3), 0 24px 48px rgba(0,0,0,0.35);  /* NEW; DIFF-additions-2026-11-11.md line 81 */
  --color-instrument-row: rgba(244,244,242,0.055);  /* NEW; DIFF-additions-2026-11-11.md line 82 */
  --color-instrument-row-edge: rgba(244,244,242,0.08);  /* NEW; DIFF-additions-2026-11-11.md line 83 */
  --color-instrument-cite: rgba(0,133,255,0.22);  /* NEW; DIFF-additions-2026-11-11.md line 84 */
  --shadow-well-inset: inset 0 0 0 1px rgba(244,244,242,0.05), inset 0 1px 0 rgba(244,244,242,0.04), inset 0 -16px 32px -20px rgba(0,0,0,0.4);  /* NEW; DIFF-additions-2026-11-11.md line 85 */
  --light-well: radial-gradient(70% 55% at 12% -6%, rgba(244,244,242,0.06), rgba(244,244,242,0) 70%), linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.2) 100%);  /* NEW; DIFF-additions-2026-11-11.md line 86 */
  --bloom-person: radial-gradient(closest-side, rgba(0,133,255,0.34), rgba(0,133,255,0));  /* NEW; DIFF-additions-2026-11-11.md line 87 */
  --color-tray: rgba(0,0,0,0.18);  /* NEW; DIFF-additions-2026-11-11.md line 88 */
  --color-instrument-dot: rgba(244,244,242,0.07);  /* NEW; DIFF-additions-2026-11-11.md line 89 */
  --color-tray-shade: rgba(0,0,0,0.3);  /* NEW; DIFF-additions-2026-11-11.md line 90 */
  --color-tray-edge: rgba(244,244,242,0.05);  /* NEW; DIFF-additions-2026-11-11.md line 91 */
  --elevation-paper: 0 1px 2px rgba(0,0,0,0.45), 0 14px 28px -10px rgba(0,0,0,0.6);  /* NEW; DIFF-additions-2026-11-11.md line 110 */
  --elevation-paper-read: 0 2px 4px rgba(0,0,0,0.5), 0 28px 52px -14px rgba(0,0,0,0.7);  /* NEW; DIFF-additions-2026-11-11.md line 111 */
  --color-line-construction: rgba(244,244,242,0.14);  /* NEW; DIFF-additions-2026-11-11.md line 112 */
  --color-line-structure: #f4f4f2;  /* NEW; DIFF-additions-2026-11-11.md line 113 */
  --color-route: #0085ff;  /* NEW; DIFF-additions-2026-11-11.md line 114 */
  --color-route-quiet: #0b2846;  /* NEW; DIFF-additions-2026-11-11.md line 115 */
  --color-region-tint: rgba(244,244,242,0.035);  /* NEW; DIFF-additions-2026-11-11.md line 116 */
  --color-accent-2: #C8372D;  /* NEW; ACCENT-2026-11-13.md line 7 */
  --color-accent-2-text: #E0665C;  /* NEW; ACCENT-2026-11-13.md line 8 */
  --color-accent-2-pale: #F7E4E1;  /* NEW; ACCENT-2026-11-13.md line 9 */
}

/* Type utility classes: one class per web style, desktop values; phone values inside the phone query below. */
.type-display-1 {
  font-family: var(--type-display-1-family);
  font-weight: var(--type-display-1-weight);
  font-size: var(--type-display-1-size-web-desktop);
  line-height: var(--type-display-1-line-height-web-desktop);
  letter-spacing: var(--type-display-1-tracking-web-desktop);
}
.type-display-2 {
  font-family: var(--type-display-2-family);
  font-weight: var(--type-display-2-weight);
  font-size: var(--type-display-2-size-web-desktop);
  line-height: var(--type-display-2-line-height-web-desktop);
  letter-spacing: var(--type-display-2-tracking-web-desktop);
}
.type-display-3 {
  font-family: var(--type-display-3-family);
  font-weight: var(--type-display-3-weight);
  font-size: var(--type-display-3-size-web-desktop);
  line-height: var(--type-display-3-line-height-web-desktop);
  letter-spacing: var(--type-display-3-tracking-web-desktop);
}
.type-title {
  font-family: var(--type-title-family);
  font-weight: var(--type-title-weight);
  font-size: var(--type-title-size-web-desktop);
  line-height: var(--type-title-line-height-web-desktop);
  letter-spacing: var(--type-title-tracking-web-desktop);
}
.type-lead {
  font-family: var(--type-lead-family);
  font-weight: var(--type-lead-weight);
  font-size: var(--type-lead-size-web-desktop);
  line-height: var(--type-lead-line-height-web-desktop);
  letter-spacing: var(--type-lead-tracking-web-desktop);
}
.type-body {
  font-family: var(--type-body-family);
  font-weight: var(--type-body-weight);
  font-size: var(--type-body-size-web-desktop);
  line-height: var(--type-body-line-height-web-desktop);
  letter-spacing: var(--type-body-tracking-web-desktop);
}
.type-panel {
  font-family: var(--type-panel-family);
  font-weight: var(--type-panel-weight);
  font-size: var(--type-panel-size-web-desktop);
  line-height: var(--type-panel-line-height-web-desktop);
  letter-spacing: var(--type-panel-tracking-web-desktop);
  font-variant-numeric: tabular-nums;
}
.type-panel-strong {
  font-family: var(--type-panel-strong-family);
  font-weight: var(--type-panel-strong-weight);
  font-size: var(--type-panel-strong-size-web-desktop);
  line-height: var(--type-panel-strong-line-height-web-desktop);
  letter-spacing: var(--type-panel-strong-tracking-web-desktop);
  font-variant-numeric: tabular-nums;
}
.type-document-title {
  font-family: var(--type-document-title-family);
  font-weight: var(--type-document-title-weight);
  font-size: var(--type-document-title-size-web-desktop);
  line-height: var(--type-document-title-line-height-web-desktop);
  letter-spacing: var(--type-document-title-tracking-web-desktop);
}
.type-document-line {
  font-family: var(--type-document-line-family);
  font-weight: var(--type-document-line-weight);
  font-size: var(--type-document-line-size-web-desktop);
  line-height: var(--type-document-line-line-height-web-desktop);
  letter-spacing: var(--type-document-line-tracking-web-desktop);
  font-variant-numeric: tabular-nums;
}
.type-caption {
  font-family: var(--type-caption-family);
  font-weight: var(--type-caption-weight);
  font-size: var(--type-caption-size-web-desktop);
  line-height: var(--type-caption-line-height-web-desktop);
  letter-spacing: var(--type-caption-tracking-web-desktop);
}
.type-chip {
  font-family: var(--type-chip-family);
  font-weight: var(--type-chip-weight);
  font-size: var(--type-chip-size-web-desktop);
  line-height: var(--type-chip-line-height-web-desktop);
  letter-spacing: var(--type-chip-tracking-web-desktop);
}
.type-action {
  font-family: var(--type-action-family);
  font-weight: var(--type-action-weight);
  font-size: var(--type-action-size-web-desktop);
  line-height: var(--type-action-line-height-web-desktop);
  letter-spacing: var(--type-action-tracking-web-desktop);
}

/* Revision 4: phone values below 768 px. Where a style has only a phone size, the desktop line height and tracking stay. */
@media (max-width: 767px) {
  :root {
    --space-well-inset: var(--space-well-inset-phone);
    --space-panel-pad: var(--space-panel-pad-phone);
    --p-radius-panel: var(--p-radius-panel-phone);
    --p-radius-well: var(--p-radius-well-phone);
  }
  .type-display-1 {
    font-size: var(--type-display-1-size-web-phone);
    line-height: var(--type-display-1-line-height-web-phone);
    letter-spacing: var(--type-display-1-tracking-web-phone);
  }
  .type-display-2 {
    font-size: var(--type-display-2-size-web-phone);
    line-height: var(--type-display-2-line-height-web-phone);
    letter-spacing: var(--type-display-2-tracking-web-phone);
  }
  .type-display-3 {
    font-size: var(--type-display-3-size-web-phone);
    line-height: var(--type-display-3-line-height-web-phone);
    letter-spacing: var(--type-display-3-tracking-web-phone);
  }
  .type-title {
    font-size: var(--type-title-size-web-phone);
    line-height: var(--type-title-line-height-web-phone);
    letter-spacing: var(--type-title-tracking-web-phone);
  }
  .type-lead {
    font-size: var(--type-lead-size-web-phone);
    line-height: var(--type-lead-line-height-web-phone);
    letter-spacing: var(--type-lead-tracking-web-phone);
  }
  .type-body {
    font-size: var(--type-body-size-web-phone);
    line-height: var(--type-body-line-height-web-phone);
    letter-spacing: var(--type-body-tracking-web-phone);
  }
  .type-panel {
    font-size: var(--type-panel-size-web-phone);
    line-height: var(--type-panel-line-height-web-phone);
    letter-spacing: var(--type-panel-tracking-web-phone);
  }
  .type-panel-strong {
    font-size: var(--type-panel-strong-size-web-phone);
  }
  .type-document-title {
    font-size: var(--type-document-title-size-web-phone);
  }
  .type-document-line {
    font-size: var(--type-document-line-size-web-phone);
  }
  .type-caption {
    font-size: var(--type-caption-size-web-phone);
  }
  .type-chip {
    font-size: var(--type-chip-size-web-phone);
  }
  .type-action {
    font-size: var(--type-action-size-web-phone);
  }
}

/* Revision 4: the active grid set. 390 values below 768 px, then 768, 1024, 1440 and 1920 from their widths. NEW. */
:root {
  --grid-columns: var(--grid-390-columns);
  --grid-gutter: var(--grid-390-gutter);
  --grid-margin: var(--grid-390-margin); /* auto (centred) from 1920 px: apply with margin-inline, never padding */
  --grid-content-max: var(--grid-390-content-max);
}
@media (min-width: 768px) {
  :root {
    --grid-columns: var(--grid-768-columns);
    --grid-gutter: var(--grid-768-gutter);
    --grid-margin: var(--grid-768-margin);
    --grid-content-max: var(--grid-768-content-max);
  }
}
@media (min-width: 1024px) {
  :root {
    --grid-columns: var(--grid-1024-columns);
    --grid-gutter: var(--grid-1024-gutter);
    --grid-margin: var(--grid-1024-margin);
    --grid-content-max: var(--grid-1024-content-max);
  }
}
@media (min-width: 1440px) {
  :root {
    --grid-columns: var(--grid-1440-columns);
    --grid-gutter: var(--grid-1440-gutter);
    --grid-margin: var(--grid-1440-margin);
    --grid-content-max: var(--grid-1440-content-max);
  }
}
@media (min-width: 1920px) {
  :root {
    --grid-columns: var(--grid-1920-columns);
    --grid-gutter: var(--grid-1920-gutter);
    --grid-margin: var(--grid-1920-margin); /* auto (centred): apply with margin-inline, never padding */
    --grid-content-max: var(--grid-1920-content-max);
  }
}