/* Generated by scripts/tokens.py from tokens/tokens.json. Do not edit; change the tokens and rebuild. */

/* Font files. Each family token in tokens.json lists its faces. */
@font-face{font-family:"PP Pangram Sans";src:url("../fonts/PPPangramSans-Semibold.woff") format("woff");font-style:normal;font-weight:600 900;font-display:swap}
@font-face{font-family:"PP Neue Montreal";src:url("../fonts/PPNeueMontreal-Book.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"PP Neue Montreal";src:url("../fonts/PPNeueMontreal-Medium.woff2") format("woff2");font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:"PP Neue Montreal";src:url("../fonts/PPNeueMontreal-Semibold.woff2") format("woff2");font-style:normal;font-weight:600 800;font-display:swap}
@font-face{font-family:"PP Neue Montreal Mono";src:url("../fonts/PPNeueMontrealMono-Book.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"PP Formula Extended";src:url("../fonts/PPFormula-ExtendedBold.woff") format("woff");font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:"PP Fuji";src:url("../fonts/PPFuji-Bold.woff2") format("woff2");font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:"PP Neue Montreal Extrabold";src:url("../fonts/PPNeueMontreal-Extrabold.woff2") format("woff2");font-style:normal;font-weight:800;font-display:swap}
@font-face{font-family:"PP Object Sans";src:url("../fonts/PPObjectSans-Heavy.woff2") format("woff2");font-style:normal;font-weight:900;font-display:swap}
@font-face{font-family:"PP Object Sans";src:url("../fonts/PPObjectSans-HeavySlanted.woff2") format("woff2");font-style:italic;font-weight:900;font-display:swap}
@font-face{font-family:"PP Pangram Sans Compressed";src:url("../fonts/PPPangramSans-CompressedExtrabold.woff") format("woff");font-style:normal;font-weight:800;font-display:swap}
@font-face{font-family:"PP Valve";src:url("../fonts/PPValve-PlainExtraboldItalic.woff2") format("woff2");font-style:italic;font-weight:800;font-display:swap}
@font-face{font-family:"PP Valve Stencil";src:url("../fonts/PPValve-StencilExtraboldItalic.woff2") format("woff2");font-style:italic;font-weight:800;font-display:swap}
@font-face{font-family:"Author";src:url("../fonts/author-regular.woff") format("woff");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"Author";src:url("../fonts/author-semibold.woff") format("woff");font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:"Author";src:url("../fonts/author-bold-italic.woff") format("woff");font-style:italic;font-weight:700;font-display:swap}
@font-face{font-family:"Azeret Mono";src:url("../fonts/azeret-mono-variable.woff2") format("woff2");font-style:normal;font-weight:100 900;font-display:swap}
@font-face{font-family:"Switzer";src:url("../fonts/switzer-semibold.woff2") format("woff2");font-style:normal;font-weight:600;font-display:swap}

/* ---- primitive tokens ---- */
:root{
  --p-color-cobalt-500:#2440fa; /* Vloora brand blue */
  --p-color-cobalt-600:#1432cd; /* Brand blue, one step darker */
  --p-color-ink-950:#11101e;
  --p-color-ink-900:#141322; /* Near black with a blue cast */
  --p-color-ink-800:#252437;
  --p-color-ink-700:#383744;
  --p-color-ink-600:#45434f;
  --p-color-ink-500:#55535f;
  --p-color-ink-400:#77757f;
  --p-color-mist-100:#e7e5f0;
  --p-color-mist-200:#e5e4eb;
  --p-color-mist-300:#dbdaea;
  --p-color-mist-400:#dad9e4;
  --p-color-slate-100:#e3e2ea;
  --p-color-slate-200:#ced2dc;
  --p-color-slate-350:#adaebe;
  --p-color-slate-400:#a8adbd;
  --p-color-slate-500:#888a9b;
  --p-color-slate-600:#757387;
  --p-color-slate-800:#3c3c51;
  --p-color-slate-900:#29293d;
  --p-color-gray-100:#f0f0f0;
  --p-color-gray-300:#bec0c5;
  --p-color-gray-400:#bbb;
  --p-color-white:#fff;
  --p-color-black:#0a0a0b;
  --p-color-cream:#f7f8f4;
  --p-color-mint:#dcfbe9;
  --p-color-violet:#dccaff;
  --p-color-pink:#ffd5ec;
  --p-color-acid:#eaff74; /* Acid yellow */
  --p-color-ice:#dce9ff;
  --p-color-lilac:#d9bbff;
  --p-color-rose:#ffc5ca;
  --p-color-plum:#912e9c;
  --p-color-grape:#8a54b1;
  --p-color-purple:#8856ce;
  --p-color-amber:#ac750f;
  --p-color-green:#3a8163;
  --p-color-teal:#3c8068;
  --p-color-alpha-ink-06:rgba(20,19,34,.06);
  --p-color-alpha-ink-08:rgba(20,19,34,.08);
  --p-color-alpha-ink-12:rgba(20,19,34,.12);
  --p-color-alpha-ink-24:rgba(20,19,34,.24);
  --p-color-alpha-ink-28:rgba(20,19,34,.28);
  --p-color-alpha-white-23:rgba(255,255,255,.23);
  --p-color-alpha-white-25:rgba(255,255,255,.25);
  --p-color-alpha-white-28:rgba(255,255,255,.28);
  --p-color-alpha-white-30:rgba(255,255,255,.3);
  --p-color-alpha-white-32:rgba(255,255,255,.32);
  --p-color-alpha-white-34:rgba(255,255,255,.34);
  --p-color-alpha-white-55:rgba(255,255,255,.55);
  --p-color-alpha-white-65:rgba(255,255,255,.65);
  --p-color-alpha-cobalt-18:rgba(36,64,250,.18);
  --p-color-alpha-black-12:rgba(0,0,0,.12);
  --p-color-alpha-black-14:rgba(0,0,0,.14);
  --p-color-alpha-black-15:rgba(0,0,0,.15);
  --p-color-player-night:#111218;
  --p-color-player-night-a42:rgba(17,18,24,.42);
  --p-color-player-art:#262d34;
  --p-color-player-button:#292b32;
  --p-color-player-button-a60:rgba(41,43,50,.6);
  --p-color-player-button-hover:#454750;
  --p-color-player-edge:#34353a;
  --p-color-player-button-edge:#50525c;
  --p-color-player-white-a18:rgba(255,255,255,.18);
  --p-color-player-text:#eaeaea;
  --p-color-player-label:#a6aaac;
  --p-color-player-artist:#adb1b9;
  --p-color-player-glyph:#b9c0d0;
  --p-color-player-signal:#23d979;
  --p-color-player-shadow:#0003;
  --p-color-product-shadow:rgba(20,19,34,.28);
  --p-color-product-shadow-soft:rgba(20,19,34,.22);
  --p-color-product-code-inline:rgba(20,19,34,.07);
  --p-font-family-pangram:"PP Pangram Sans","PP Neue Montreal",sans-serif; /* PP Pangram Sans Semibold, local in /fonts/ */
  --p-font-family-neue-montreal:"PP Neue Montreal",Arial,sans-serif; /* PP Neue Montreal Book, Medium and Semibold, local in /fonts/ */
  --p-font-family-neue-montreal-mono:"PP Neue Montreal Mono",monospace; /* PP Neue Montreal Mono Book, local in /fonts/ */
  --p-font-family-georgia:Georgia,serif;
  --p-font-family-arial:Arial,sans-serif;
  --p-font-family-arial-helvetica:Arial,Helvetica,sans-serif;
  --p-font-family-courier:"Courier New",monospace;
  --p-font-family-formula-extended:"PP Formula Extended","PP Neue Montreal",sans-serif; /* PP Formula Extended Bold, the Vloora wordmark face. From Ron's font archive (tennis-team-manager). Available for trials; no semantic role uses it yet. */
  --p-font-family-fuji:"PP Fuji","PP Neue Montreal",sans-serif; /* PP Fuji Bold. From Ron's font archive (tennis-team-manager). Available for trials; no semantic role uses it yet. */
  --p-font-family-neue-montreal-extrabold:"PP Neue Montreal Extrabold","PP Neue Montreal",sans-serif; /* PP Neue Montreal Extrabold. From Ron's font archive (tennis-team-manager). Available for trials; no semantic role uses it yet. */
  --p-font-family-object-sans:"PP Object Sans","PP Neue Montreal",sans-serif; /* PP Object Sans Heavy and Heavy Slanted. From Ron's font archive (tennis-team-manager). Available for trials; no semantic role uses it yet. */
  --p-font-family-pangram-compressed:"PP Pangram Sans Compressed","PP Pangram Sans",sans-serif; /* PP Pangram Sans Compressed Extrabold. From Ron's font archive (tennis-team-manager). Available for trials; no semantic role uses it yet. */
  --p-font-family-valve:"PP Valve","PP Neue Montreal",sans-serif; /* PP Valve Plain Extrabold Italic. From Ron's font archive (tennis-team-manager). Available for trials; no semantic role uses it yet. */
  --p-font-family-valve-stencil:"PP Valve Stencil","PP Valve",sans-serif; /* PP Valve Stencil Extrabold Italic. From Ron's font archive (tennis-team-manager). Available for trials; no semantic role uses it yet. */
  --p-font-family-author:Author,"PP Neue Montreal",sans-serif; /* Author (Fontshare) Regular, Semibold and Bold Italic. From Ron's font archive (tennis-team-manager). Available for trials; no semantic role uses it yet. */
  --p-font-family-azeret-mono:"Azeret Mono","PP Neue Montreal Mono",monospace; /* Azeret Mono variable. From Ron's font archive (tennis-team-manager). Available for trials; no semantic role uses it yet. */
  --p-font-family-switzer:Switzer,"PP Neue Montreal",sans-serif; /* Switzer (Fontshare) Semibold. From Ron's font archive (tennis-team-manager). Available for trials; no semantic role uses it yet. */
  --p-font-size-meta:clamp(15px,13.9683px + 0.26455vw,16px); /* 15 at 390 to 16 at 768 and up; a floor below the ratio */
  --p-font-size-step-minus-1:clamp(16px,14.8114px + 0.30476vw,19.2px); /* 16 to 19.2 */
  --p-font-size-step-0:clamp(19px,17.1429px + 0.47619vw,24px); /* 19 to 24 */
  --p-font-size-step-1:clamp(22.8px,20.1257px + 0.68571vw,30px); /* 22.8 to 30 */
  --p-font-size-step-2:clamp(27.4px,23.6486px + 0.96190vw,37.5px); /* 27.4 to 37.5 */
  --p-font-size-step-3:clamp(32.8px,27.5629px + 1.34286vw,46.9px); /* 32.8 to 46.9 */
  --p-font-size-step-1-2:clamp(22.8px,17.3400px + 1.40000vw,37.5px); /* step 1 at 390 to step 2 at 1440: 22.8 to 37.5 */
  --p-font-size-step-2-3:clamp(27.4px,20.1571px + 1.85714vw,46.9px); /* step 2 to step 3: 27.4 to 46.9 */
  --p-font-size-step-4-5:clamp(39.4px,26.8457px + 3.21905vw,73.2px); /* step 4 to step 5: 39.4 to 73.2 */
  --p-font-size-step-5-6:clamp(47.3px,30.8457px + 4.21905vw,91.6px); /* step 5 to step 6: 47.3 to 91.6 */
  --p-font-size-step-6-8:clamp(56.7px,24.6086px + 8.22857vw,143.1px); /* step 6 to step 8: 56.7 to 143.1 */
  --p-font-size-step-6-9:clamp(56.7px,11.3486px + 11.62857vw,178.8px); /* step 6 to step 9: 56.7 to 178.8 */
  --p-font-size-fluid-18-24:clamp(18px,1.8vw,24px);
  --p-font-size-10:10px;
  --p-font-size-12:12px;
  --p-font-size-13:13px;
  --p-font-size-14:14px;
  --p-font-size-15:15px;
  --p-font-size-16:16px;
  --p-font-size-17:17px;
  --p-font-size-18:18px;
  --p-font-size-23:23px;
  --p-space-2:2px;
  --p-space-4:4px;
  --p-space-8:8px;
  --p-space-12:12px;
  --p-space-16:16px;
  --p-space-20:20px;
  --p-space-24:24px;
  --p-space-32:32px;
  --p-space-48:48px;
  --p-space-64:64px;
  --p-space-72:72px;
  --p-space-88:88px;
  --p-space-96:96px;
  --p-space-neg-2:-2px;
  --p-space-fluid-gutter:clamp(22px,4.3vw,76px);
  --p-space-fluid-76-145:clamp(76px,9vw,145px);
  --p-space-fluid-90-150:clamp(90px,10vw,150px);
  --p-space-fluid-48-96:clamp(48px,6vw,96px);
  --p-space-fluid-44-96:clamp(44px,6vw,96px);
  --p-space-fluid-36-60:clamp(36px,4vw,60px);
  --p-space-fluid-72-150:clamp(72px,9vw,150px);
  --p-space-fluid-72-115:clamp(72px,7vw,115px);
  --p-space-fluid-40-64:clamp(40px,4.5vw,64px);
  --p-space-fluid-35-120:clamp(35px,6vw,120px);
  --p-space-fluid-36-96:clamp(36px,6vw,96px);
  --p-space-fluid-20-44:clamp(20px,3vw,44px);
  --p-radius-3:3px;
  --p-radius-4:4px;
  --p-radius-5:5px;
  --p-radius-6:6px;
  --p-radius-8:8px;
  --p-radius-9:9px;
  --p-radius-11:11px;
  --p-radius-12:12px;
  --p-radius-16:16px;
  --p-radius-22:22px;
  --p-radius-24:24px;
  --p-radius-round:50%;
  --p-radius-pill:9999px;
  --p-radius-pill-short:999px;
  --p-border-width-1:1px;
  --p-border-width-2:2px;
  --p-border-width-3:3px;
  --p-border-width-4:4px;
  --p-border-width-5:5px;
  --p-shadow-menu:0 20px 30px var(--p-color-alpha-black-12);
  --p-shadow-menu-wide:0 18px 35px var(--p-color-alpha-black-14);
  --p-shadow-field:0 1px 2px var(--p-color-alpha-ink-06),0 8px 24px var(--p-color-alpha-ink-08);
  --p-shadow-screen:0 30px 60px var(--p-color-alpha-ink-28);
  --p-shadow-art:0 12px 27px var(--p-color-alpha-black-15);
  --p-shadow-player:0 5px 18px var(--p-color-player-shadow);
  --p-duration-200:0.2s;
  --p-duration-300:0.3s;
  --p-duration-700:0.7s;
  --p-easing-reveal:cubic-bezier(.32,.72,0,1);
  --p-breakpoint-440:440px;
  --p-breakpoint-520:520px;
  --p-breakpoint-600:600px;
  --p-breakpoint-700:700px;
  --p-breakpoint-750:750px;
  --p-breakpoint-760:760px;
  --p-breakpoint-900:900px;
  --p-breakpoint-960:960px;
  --p-breakpoint-1024:1024px;
  --p-breakpoint-1120:1120px;
  --p-breakpoint-product-stack:1000px;
  --p-z-index-20:20;
  --p-z-index-50:50;
  --p-z-index-1200:1200;
  --p-product-text-product-title:clamp(75px,10vw,155px);
  --p-product-text-product-summary:clamp(21px,2.2vw,32px);
  --p-product-text-product-code:14px;
  --p-product-text-product-label:16px;
  --p-product-text-product-caption:clamp(18px,1.5vw,22px);
  --p-product-text-product-metadata:13px;
  --p-product-text-product-example-title:clamp(24px,2.4vw,34px);
  --p-product-text-product-example-body:clamp(17px,1.4vw,20px);
  --p-product-text-product-check:clamp(16px,1.3vw,19px);
  --p-product-text-product-table:15px;
  --p-product-text-product-result:17px;
  --p-product-text-product-section:clamp(46px,5.8vw,92px);
  --p-product-text-product-lead:clamp(19px,1.7vw,25px);
  --p-product-text-product-subhead:clamp(30px,3.1vw,48px);
  --p-product-text-product-body:clamp(19px,1.6vw,24px);
  --p-product-text-product-title-mobile:clamp(65px,15vw,118px);
  --p-product-text-product-summary-mobile:clamp(21px,5.6vw,26px);
  --p-product-text-product-section-mobile:clamp(40px,10.4vw,64px);
  --p-product-text-product-subhead-mobile:clamp(28px,7.4vw,36px);
  --p-product-text-product-body-mobile:19px;
  --p-product-text-product-chart-mobile:12px;
}

/* ---- semantic tokens ---- */
:root{
  --color-brand:var(--p-color-cobalt-500); /* The brand color: header field, home hero, brand rules */
  --color-brand-hover:var(--p-color-cobalt-600);
  --color-brand-tint:var(--p-color-ice); /* Pale tint of the brand: resting nodes in figures */
  --color-accent:var(--p-color-acid); /* Accent: current nav item, primary buttons, highlighted words and figure highlights */
  --color-accent-hover:var(--p-color-white); /* Accent buttons turn to this on hover */
  --color-link:var(--color-brand); /* Links in reading text and hovered titles in lists */
  --color-link-hover:var(--color-brand-hover);
  --color-focus:var(--p-color-plum); /* Keyboard focus outline on links and buttons */
  --color-focus-fallback:var(--color-brand); /* Focus outline on other focusable elements */
  --color-focus-ring:var(--p-color-alpha-cobalt-18); /* Soft ring around a focused field, a translucent brand color; a brand sets it with the brand */
  --color-surface-canvas:var(--p-color-cream); /* Body background, behind every section */
  --color-surface-page:var(--p-color-white); /* Main reading surface: article shells, index lists, news bodies */
  --color-surface-raised:var(--p-color-white); /* Fields, cards and figure panels that sit on a colored section */
  --color-surface-muted:var(--p-color-cream); /* Quiet light field: index heads, essay heads, figure frames, table headers */
  --color-surface-inverse:var(--p-color-ink-900); /* Dark sections: featured paper, research heads, news heads */
  --color-surface-inverse-raised:var(--p-color-ink-800); /* Panels on a dark section */
  --color-surface-brand:var(--color-brand); /* Header and home hero */
  --color-surface-highlight:var(--color-accent); /* Accent field: featured case study, Approach exchange section, guide heads */
  --color-surface-note:var(--color-surface-accent-2); /* Technical note heads */
  --color-surface-accent-1:var(--p-color-mint); /* Section field */
  --color-surface-accent-2:var(--p-color-violet); /* Section field */
  --color-surface-accent-3:var(--p-color-pink); /* Section field */
  --color-surface-code:var(--p-color-ink-950); /* Code blocks */
  --color-surface-code-inline:var(--p-color-gray-100);
  --color-surface-media:var(--p-color-black); /* Behind phone screenshots */
  --color-text-primary:var(--p-color-ink-900);
  --color-text-secondary:var(--p-color-ink-700); /* Descriptions under list titles, step notes */
  --color-text-tertiary:var(--p-color-ink-600); /* Small supporting text */
  --color-text-muted:var(--p-color-ink-500); /* Captions, dates and metadata */
  --color-text-placeholder:var(--p-color-ink-400);
  --color-text-on-inverse:var(--p-color-white);
  --color-text-on-inverse-secondary:var(--p-color-mist-400);
  --color-text-on-inverse-muted:var(--p-color-mist-300);
  --color-text-on-inverse-subtle:var(--p-color-mist-200);
  --color-text-on-inverse-label:var(--p-color-alpha-white-65);
  --color-text-on-brand:var(--p-color-white);
  --color-text-on-brand-pending:var(--p-color-alpha-white-28); /* Hero words before they are read in */
  --color-text-on-brand-highlight:var(--color-accent); /* Highlighted words in the hero */
  --color-text-on-accent:var(--p-color-ink-900);
  --color-text-on-code:var(--p-color-white);
  --color-border-subtle:var(--p-color-alpha-ink-24); /* Hairlines on light fields */
  --color-border-strong:var(--p-color-ink-900); /* Solid rules on light fields */
  --color-border-field:var(--p-color-alpha-ink-28);
  --color-border-accent:var(--color-brand); /* Brand rules: quotes, figure frames, architecture nodes */
  --color-border-table:var(--p-color-gray-400);
  --color-border-table-card:var(--p-color-gray-300);
  --color-border-on-inverse:var(--p-color-alpha-white-30);
  --color-border-on-inverse-strong:var(--p-color-alpha-white-32);
  --color-border-on-inverse-mid:var(--p-color-alpha-white-34);
  --color-border-on-brand:var(--p-color-alpha-white-23);
  --color-border-on-brand-soft:var(--p-color-alpha-white-25);
  --color-border-on-brand-control:var(--p-color-alpha-white-55);
  --color-figure-series-1:var(--color-brand); /* Brand series: the person's actions, connector lines */
  --color-figure-series-2:var(--color-accent); /* Highlighted or allowed state */
  --color-figure-series-3:var(--p-color-lilac); /* Approval required */
  --color-figure-series-4:var(--p-color-rose); /* Blocked */
  --color-figure-series-5:var(--p-color-grape); /* Architecture: brokerage node */
  --color-figure-series-6:var(--p-color-green); /* Architecture: connection node */
  --color-figure-ink:var(--color-text-primary); /* Labels and strokes on light figures */
  --color-figure-muted:var(--color-text-muted); /* Axis and street labels */
  --color-figure-grid:var(--p-color-slate-100);
  --color-figure-surface:var(--color-surface-raised);
  --color-figure-node:var(--color-brand-tint); /* Resting node on light figures */
  --color-figure-connector:var(--p-color-slate-600);
  --color-figure-inverse-node:var(--p-color-slate-900);
  --color-figure-inverse-node-alt:var(--p-color-slate-800);
  --color-figure-inverse-node-edge:var(--p-color-slate-500);
  --color-figure-inverse-node-edge-alt:var(--p-color-slate-350);
  --color-figure-inverse-connector:var(--p-color-slate-400);
  --color-figure-inverse-connector-strong:var(--p-color-slate-200);
  --color-figure-inverse-label:var(--p-color-cream);
  --color-figure-inverse-label-strong:var(--p-color-white);
  --color-player-surface:var(--p-color-player-night);
  --color-player-surface-compact:var(--p-color-player-night-a42);
  --color-player-art:var(--p-color-player-art);
  --color-player-button:var(--p-color-player-button);
  --color-player-button-compact:var(--p-color-player-button-a60);
  --color-player-button-hover:var(--p-color-player-button-hover);
  --color-player-border:var(--p-color-player-edge);
  --color-player-border-compact:var(--p-color-player-white-a18);
  --color-player-button-border:var(--p-color-player-button-edge);
  --color-player-text:var(--p-color-player-text);
  --color-player-text-strong:var(--p-color-white);
  --color-player-label:var(--p-color-player-label);
  --color-player-artist:var(--p-color-player-artist);
  --color-player-glyph:var(--p-color-player-glyph);
  --color-player-signal:var(--p-color-player-signal);
  --color-product-shadow:var(--p-color-product-shadow);
  --color-product-shadow-soft:var(--p-color-product-shadow-soft);
  --color-product-code-inline:var(--p-color-product-code-inline);
  --font-title:var(--p-font-family-pangram); /* Page titles, large numerals and display wordmarks */
  --font-heading:var(--p-font-family-neue-montreal); /* Section headings and list titles */
  --font-body:var(--p-font-family-neue-montreal); /* Reading text */
  --font-ui:var(--p-font-family-neue-montreal); /* Navigation, buttons, forms and controls */
  --font-meta:var(--p-font-family-neue-montreal-mono); /* Dates and small details */
  --font-figure:var(--font-body); /* Labels in the Approach and case study diagrams */
  --font-figure-plain:var(--p-font-family-arial); /* Labels in the research paper figures, which have always been set in Arial */
  --font-wordmark-serif:var(--p-font-family-georgia); /* The VarsityApex wordmark on Products */
  --font-player:var(--p-font-family-arial-helvetica);
  --font-player-symbol:var(--p-font-family-arial);
  --font-player-label:var(--p-font-family-courier);
  --text-meta:var(--p-font-size-meta); /* Dates, publication line, back link, page nav */
  --text-small:var(--p-font-size-step-minus-1); /* Captions, sources, tables */
  --text-body:var(--p-font-size-step-0); /* Reading text */
  --text-step-1:var(--p-font-size-step-1); /* Statements and marketing text */
  --text-step-2:var(--p-font-size-step-2); /* List titles, figure captions */
  --text-step-3:var(--p-font-size-step-3); /* Index titles, large numerals */
  --text-h2:var(--text-step-3); /* Article and news H2 */
  --text-h3:var(--text-step-1); /* Article H3 */
  --text-subtitle:var(--text-step-1); /* Article subtitle */
  --text-title:var(--p-font-size-step-5-6); /* Article and news titles */
  --text-lead:var(--p-font-size-step-1-2); /* Lead under marketing and index titles */
  --text-section-h3:var(--p-font-size-step-2-3); /* Marketing H3 */
  --text-section:var(--p-font-size-step-4-5); /* Marketing section H2 */
  --text-display:var(--p-font-size-step-6-8); /* Marketing page titles */
  --text-hero:var(--p-font-size-step-6-9); /* Home hero */
  --text-ui:var(--p-font-size-16); /* Navigation and buttons */
  --text-ui-small:var(--p-font-size-15); /* Menu button, signup label */
  --text-control:var(--p-font-size-17); /* Signup field and status */
  --text-note:var(--p-font-size-18); /* The line under the footer signup */
  --text-email:var(--p-font-size-fluid-18-24); /* Footer email link */
  --text-legal:var(--p-font-size-13); /* Footer copyright and links */
  --text-player-symbol:var(--p-font-size-23);
  --text-player-title:var(--p-font-size-14);
  --text-player-artist:var(--p-font-size-12);
  --text-player-label:var(--p-font-size-10);
  --text-product-title:var(--p-product-text-product-title);
  --text-product-summary:var(--p-product-text-product-summary);
  --text-product-code:var(--p-product-text-product-code);
  --text-product-label:var(--p-product-text-product-label);
  --text-product-caption:var(--p-product-text-product-caption);
  --text-product-metadata:var(--p-product-text-product-metadata);
  --text-product-example-title:var(--p-product-text-product-example-title);
  --text-product-example-body:var(--p-product-text-product-example-body);
  --text-product-check:var(--p-product-text-product-check);
  --text-product-table:var(--p-product-text-product-table);
  --text-product-result:var(--p-product-text-product-result);
  --text-product-section:var(--p-product-text-product-section);
  --text-product-lead:var(--p-product-text-product-lead);
  --text-product-subhead:var(--p-product-text-product-subhead);
  --text-product-body:var(--p-product-text-product-body);
  --text-product-title-mobile:var(--p-product-text-product-title-mobile);
  --text-product-summary-mobile:var(--p-product-text-product-summary-mobile);
  --text-product-section-mobile:var(--p-product-text-product-section-mobile);
  --text-product-subhead-mobile:var(--p-product-text-product-subhead-mobile);
  --text-product-body-mobile:var(--p-product-text-product-body-mobile);
  --text-product-chart-mobile:var(--p-product-text-product-chart-mobile);
  --space-half:var(--p-space-2);
  --space-1:var(--p-space-4);
  --space-2:var(--p-space-8);
  --space-3:var(--p-space-12);
  --space-4:var(--p-space-16);
  --space-5:var(--p-space-24);
  --space-6:var(--p-space-32);
  --space-7:var(--p-space-48);
  --space-8:var(--p-space-64);
  --space-9:var(--p-space-96);
  --space-gutter:var(--p-space-fluid-gutter); /* Side padding of the page container */
  --space-gutter-narrow:var(--p-space-20); /* Side padding at 440px and below */
  --space-stack:var(--space-5); /* Gap between stacked blocks */
  --space-section:var(--p-space-fluid-76-145); /* Vertical padding of a full section */
  --space-section-end:var(--p-space-fluid-90-150); /* Bottom padding of a list or reading section */
  --space-list-start:var(--p-space-fluid-48-96); /* Top padding of the Writing and News lists */
  --space-reading-start:var(--p-space-fluid-44-96); /* Top padding of article and news bodies */
  --space-head-start:var(--p-space-fluid-36-60); /* Top padding of article and news heads */
  --space-index-head-start:var(--p-space-fluid-72-150);
  --space-index-head-end:var(--p-space-fluid-72-115);
  --space-title-gap:var(--p-space-fluid-40-64); /* Space above an article title and below a news title */
  --space-feature-gap:var(--p-space-fluid-35-120); /* Column gap in featured sections on Home */
  --space-heading-gap:var(--p-space-fluid-36-96); /* Space under a section heading */
  --space-figure-pad:var(--p-space-fluid-20-44); /* Padding inside figure frames */
  --space-header:var(--p-space-88); /* Header height */
  --space-header-compact:var(--p-space-72); /* Header height at 960px and below */
  --space-lift:var(--p-space-neg-2); /* How far a button rises on hover */
  --radius-subtle:var(--p-radius-3); /* Indicators, inline code, the abstract panel */
  --radius-chip:var(--p-radius-4); /* Inline code in guides */
  --radius-image:var(--p-radius-6); /* Wide screenshots */
  --radius-control:var(--p-radius-8); /* Inputs, buttons inside a field, choice buttons */
  --radius-portrait:var(--p-radius-8);
  --radius-panel:var(--p-radius-9); /* Diagram panels on dark sections */
  --radius-field:var(--p-radius-12); /* The signup field */
  --radius-card:var(--p-radius-12); /* Code blocks, guide examples, product art */
  --radius-media:var(--p-radius-16); /* News photos */
  --radius-device:var(--p-radius-22); /* Phone screenshots */
  --radius-media-large:var(--p-radius-24); /* Featured screenshot on Home */
  --radius-pill:var(--p-radius-pill);
  --radius-round:var(--p-radius-round);
  --radius-player:var(--p-radius-11);
  --radius-player-art:var(--p-radius-5);
  --radius-player-pill:var(--p-radius-pill-short);
  --border-hairline:var(--p-border-width-1);
  --border-underline:var(--p-border-width-2);
  --border-quote:var(--p-border-width-3);
  --border-figure:var(--p-border-width-4);
  --border-node:var(--p-border-width-5);
  --border-focus:var(--p-border-width-3); /* Focus outline width */
  --border-focus-player:var(--p-border-width-2);
  --focus-offset:var(--p-border-width-4);
  --focus-offset-tight:var(--p-border-width-2);
  --shadow-menu:var(--p-shadow-menu);
  --shadow-menu-wide:var(--p-shadow-menu-wide);
  --shadow-field:var(--p-shadow-field);
  --shadow-field-focus:0 0 0 4px var(--color-focus-ring),0 8px 24px var(--p-color-alpha-ink-08); /* Focused signup field: the brand ring over the field shadow */
  --shadow-screen:var(--p-shadow-screen);
  --shadow-art:var(--p-shadow-art);
  --shadow-player:var(--p-shadow-player);
  --duration-fast:var(--p-duration-200);
  --duration-base:var(--p-duration-300);
  --duration-reveal:var(--p-duration-700);
  --easing-reveal:var(--p-easing-reveal);
  --z-header:var(--p-z-index-20);
  --z-skip:var(--p-z-index-50);
  --z-player:var(--p-z-index-1200);
}

/* ---- component tokens ---- */
:root{
  --header-bg:var(--color-surface-brand);
  --header-fg:var(--color-text-on-brand);
  --header-link-hover:var(--color-accent);
  --nav-current-indicator:var(--color-accent); /* Bar under the current page in the main navigation */
  --nav-current-indicator-height:var(--border-quote);
  --nav-menu-bg:var(--color-surface-brand); /* The open phone menu */
  --button-primary-bg:var(--color-accent);
  --button-primary-fg:var(--color-text-on-accent);
  --button-primary-bg-hover:var(--color-accent-hover);
  --button-inverse-bg:var(--color-surface-inverse); /* Primary button on an accent field */
  --button-inverse-fg:var(--color-text-on-inverse);
  --button-inverse-bg-hover:var(--color-brand);
  --signup-button-bg:var(--color-brand);
  --signup-button-bg-hover:var(--color-brand-hover);
  --signup-button-fg:var(--color-text-on-brand);
  --footer-bg:var(--color-surface-accent-2);
  --footer-fg:var(--color-text-primary);
}