/* LaneWise design system: theme.css (palette, roles, themes and every token).
   Generated by _tools/design-system/generate.mjs from _tools/design-system/maps/lanewise.mjs (with lanewise.auto.json). Edit the source, then run it again. */
/* How it works
   - The palette is locked. Sections never read it directly, they read roles (--role-*).
   - Roles are set for the Original theme on :root. A theme is <html data-theme="<id>">.
   - Style panel changes go on :root after this file (inline style on <html> or a later <style>).
   - Derived colours, buttons and aliases are declared on ":root, [data-theme]" so they follow the roles. */

/* 1. Named palette (locked) */
:root {
  --color-shell: #fbfaf7;
  --color-parchment: #f3f0ea;
  --color-kraft: #ece8df;
  --color-white: #ffffff;
  --color-tone-shell: #faf9f7;
  --color-rope-line: #e2ddd3;
  --color-burlap: #c7c1b5;
  --color-cream: #f4eee3;
  --color-tar: #1a1a18;
  --color-diesel: #33312d;
  --color-bilge: #4e4b46;
  --color-ballast-grey: #6e6b65;
  --color-fog: #9a958c;
  --color-night-glass: #10131a;
  --color-deep-harbour: #17233a;
  --color-harbour-navy: #1e2b40;
  --color-navy-card: #263146;
  --color-steel-haze: #8d99ad;
  --color-container-rust: #c2652e;
  --color-deep-rust: #a3521f;
  --color-signal-amber: #e08a57;
  --color-apricot: #eea06e;
  --color-customs-green: #4f7a55;
  --color-sea-green: #7fb089;
  --color-error-red: #b22921;
  --color-error-ink: #8a3b14;
  --color-error-wash: #f6e5da;
  --color-navy-line: #34435c;
  --color-kit-ink: #1f2420;
  --color-mist-blue: #d9dfe7;
  --color-band-shade: #14161a;
  --color-air-sand: #ebddc8;
  --color-shadow-umber: #1a140d;
  --color-form-glass: #0e1419;
  --color-harbour-night: #0b0f16;
  --color-gunmetal: #212429;
  --color-coal: #16171b;
  --color-pitch: #0c0d0f;
  --color-jet: #000000;
  --color-pager-ink: #333333;
  --color-pager-line: #cccccc;
  --color-pager-white: #fafafa;
}

/* 2. Colour roles: Original */
:root {
  --role-ink: var(--color-tar);
  --role-page: var(--color-shell);
  --role-surface: var(--color-parchment);
  --role-accent: var(--color-container-rust);
  --role-accent-deep: var(--color-deep-rust);
  --role-line: var(--color-rope-line);
  --role-on-photo: var(--color-cream);
  --role-overlay: var(--color-night-glass);
  --role-surface-2: var(--color-kraft);
  --role-card: var(--color-white);
  --role-line-strong: var(--color-burlap);
  --role-ink-2: var(--color-diesel);
  --role-ink-3: var(--color-bilge);
  --role-ink-soft: var(--color-ballast-grey);
  --role-ink-muted: var(--color-fog);
  --role-band: var(--color-deep-harbour);
  --role-band-surface: var(--color-harbour-navy);
  --role-on-band: var(--color-cream);
  --role-band-ink-soft: var(--color-steel-haze);
  --role-on-ink: var(--color-cream);
  --role-on-cream: var(--color-tar);
  --role-accent-light: var(--color-signal-amber);
  --role-accent-soft: var(--color-apricot);
  --role-success: var(--color-customs-green);
  --role-success-light: var(--color-sea-green);
  --role-error: var(--color-error-red);
}

/* 3. Themes: each sets every role. Photo overlay stays dark in every theme. */
[data-theme="original"] {
  --role-ink: var(--color-tar);
  --role-page: var(--color-shell);
  --role-surface: var(--color-parchment);
  --role-accent: var(--color-container-rust);
  --role-accent-deep: var(--color-deep-rust);
  --role-line: var(--color-rope-line);
  --role-on-photo: var(--color-cream);
  --role-overlay: var(--color-night-glass);
  --role-surface-2: var(--color-kraft);
  --role-card: var(--color-white);
  --role-line-strong: var(--color-burlap);
  --role-ink-2: var(--color-diesel);
  --role-ink-3: var(--color-bilge);
  --role-ink-soft: var(--color-ballast-grey);
  --role-ink-muted: var(--color-fog);
  --role-band: var(--color-deep-harbour);
  --role-band-surface: var(--color-harbour-navy);
  --role-on-band: var(--color-cream);
  --role-band-ink-soft: var(--color-steel-haze);
  --role-on-ink: var(--color-cream);
  --role-on-cream: var(--color-tar);
  --role-accent-light: var(--color-signal-amber);
  --role-accent-soft: var(--color-apricot);
  --role-success: var(--color-customs-green);
  --role-success-light: var(--color-sea-green);
  --role-error: var(--color-error-red);
}
[data-theme="bill-of-lading"] {
  color-scheme: light;
  --role-ink: #111111;
  --role-page: #ffffff;
  --role-surface: #f4f4f2;
  --role-accent: #b3261e;
  --role-accent-deep: #8c1d17;
  --role-line: #e3e3df;
  --role-on-photo: #ffffff;
  --role-overlay: #0d0f12;
  --role-surface-2: #ebebe7;
  --role-card: #ffffff;
  --role-line-strong: #c9c9c3;
  --role-ink-2: #2e2e2e;
  --role-ink-3: #474745;
  --role-ink-soft: #66665f;
  --role-ink-muted: #8f8f88;
  --role-band: #23262b;
  --role-band-surface: #2e3238;
  --role-on-band: #f4f4f2;
  --role-band-ink-soft: #a3a8b0;
  --role-on-ink: #ffffff;
  --role-on-cream: #111111;
  --role-accent-light: #e0574d;
  --role-accent-soft: #f08a80;
  --role-success: #3f7a4a;
  --role-success-light: #86c093;
  --role-error: #b22921;
}
[data-theme="baltic-lane"] {
  color-scheme: light;
  --role-ink: #14202b;
  --role-page: #f8fafb;
  --role-surface: #eef2f4;
  --role-accent: #1f7a80;
  --role-accent-deep: #165c61;
  --role-line: #dbe2e6;
  --role-on-photo: #f2f6f8;
  --role-overlay: #0b1218;
  --role-surface-2: #e4eaee;
  --role-card: #ffffff;
  --role-line-strong: #bfcad1;
  --role-ink-2: #2a3742;
  --role-ink-3: #42505b;
  --role-ink-soft: #5f6c76;
  --role-ink-muted: #8a96a0;
  --role-band: #22384a;
  --role-band-surface: #2b4458;
  --role-on-band: #eef3f6;
  --role-band-ink-soft: #9fb2c2;
  --role-on-ink: #f2f6f8;
  --role-on-cream: #14202b;
  --role-accent-light: #4aa3a8;
  --role-accent-soft: #7cc3c7;
  --role-success: #3f7a5c;
  --role-success-light: #85bfa0;
  --role-error: #b22921;
}
[data-theme="suez-sand"] {
  color-scheme: light;
  --role-ink: #241a10;
  --role-page: #fcf8f1;
  --role-surface: #f4ecdf;
  --role-accent: #a8631a;
  --role-accent-deep: #84490f;
  --role-line: #e7dccb;
  --role-on-photo: #f7efe2;
  --role-overlay: #140e08;
  --role-surface-2: #ede2d1;
  --role-card: #fffdf9;
  --role-line-strong: #cfbfa6;
  --role-ink-2: #3c2f22;
  --role-ink-3: #574735;
  --role-ink-soft: #75644f;
  --role-ink-muted: #a0907a;
  --role-band: #2e2016;
  --role-band-surface: #3a2a1e;
  --role-on-band: #f7efe2;
  --role-band-ink-soft: #bba68c;
  --role-on-ink: #f7efe2;
  --role-on-cream: #241a10;
  --role-accent-light: #d48a45;
  --role-accent-soft: #e3a86f;
  --role-success: #4f7a55;
  --role-success-light: #7fb089;
  --role-error: #b22921;
}
[data-theme="night-port"] {
  color-scheme: dark;
  --role-ink: #f4eee3;
  --role-page: #0f1726;
  --role-surface: #162034;
  --role-accent: #f0a24a;
  --role-accent-deep: #f6bf7a;
  --role-line: #26324a;
  --role-on-photo: #f4eee3;
  --role-overlay: #10131a;
  --role-surface-2: #1b263c;
  --role-card: #1a2438;
  --role-line-strong: #34415b;
  --role-ink-2: #e0d9cc;
  --role-ink-3: #cfc8bb;
  --role-ink-soft: #aeb6c4;
  --role-ink-muted: #8792a5;
  --role-band: #0a101c;
  --role-band-surface: #141d2e;
  --role-on-band: #f4eee3;
  --role-band-ink-soft: #8d99ad;
  --role-on-ink: #0f1726;
  --role-on-cream: #1a1a18;
  --role-accent-light: #f6bf7a;
  --role-accent-soft: #c98a3e;
  --role-success: #7fb089;
  --role-success-light: #a4cfae;
  --role-error: #ff8a7a;
}
[data-theme="inverted"] {
  color-scheme: dark;
  --role-ink: #f4eee3;
  --role-page: #121211;
  --role-surface: #1a1a18;
  --role-accent: #e08a57;
  --role-accent-deep: #eea06e;
  --role-line: #2c2b28;
  --role-on-photo: #f4eee3;
  --role-overlay: #10131a;
  --role-surface-2: #22211e;
  --role-card: #1e1e1c;
  --role-line-strong: #3d3b37;
  --role-ink-2: #dcd6cb;
  --role-ink-3: #c9c3b8;
  --role-ink-soft: #aaa59c;
  --role-ink-muted: #85817a;
  --role-band: #17233a;
  --role-band-surface: #1e2b40;
  --role-on-band: #f4eee3;
  --role-band-ink-soft: #8d99ad;
  --role-on-ink: #121211;
  --role-on-cream: #1a1a18;
  --role-accent-light: #eea06e;
  --role-accent-soft: #c2652e;
  --role-success: #7fb089;
  --role-success-light: #a4cfae;
  --role-error: #ff8a7a;
}

/* 4. Derived colours: worked out from roles with color-mix, never stored */
:root,
[data-theme] {
  --tone-jet-12: rgb(from var(--color-jet) r g b / 12%);
  --tone-ink-a26: rgb(from var(--role-ink) r g b / calc(26 / 255));
  --tone-on-band-a46: rgb(from var(--role-on-band) r g b / calc(46 / 255));
  --tone-ink-a15: rgb(from var(--role-ink) r g b / calc(15 / 255));
  --tone-band-a217: rgb(from var(--role-band) r g b / calc(217 / 255));
  --tone-ink-soft-64-line-strong: color-mix(in srgb, var(--role-ink-soft) 64%, var(--role-line-strong));
  --tone-on-band-a217: rgb(from var(--role-on-band) r g b / calc(217 / 255));
  --tone-on-band-a13: rgb(from var(--role-on-band) r g b / calc(13 / 255));
  --tone-on-band-a166: rgb(from var(--role-on-band) r g b / calc(166 / 255));
  --tone-on-band-a115: rgb(from var(--role-on-band) r g b / calc(115 / 255));
  --tone-on-band-a179: rgb(from var(--role-on-band) r g b / calc(179 / 255));
  --tone-ink-a31: rgb(from var(--role-ink) r g b / calc(31 / 255));
  --tone-harbour-night-a179: rgb(from var(--color-harbour-night) r g b / calc(179 / 255));
  --tone-harbour-night-a89: rgb(from var(--color-harbour-night) r g b / calc(89 / 255));
  --tone-on-band-a191: rgb(from var(--role-on-band) r g b / calc(191 / 255));
  --tone-on-band-40: rgb(from var(--role-on-band) r g b / 40%);
  --tone-overlay-a168: rgb(from var(--role-overlay) r g b / calc(168 / 255));
  --tone-kit-ink-a15: rgb(from var(--color-kit-ink) r g b / calc(15 / 255));
  --tone-page-80: rgb(from var(--role-page) r g b / 80%);
  --tone-accent-35-error-61-shadow-umber: color-mix(in srgb, color-mix(in srgb, var(--role-accent) 35%, var(--role-error)) 61%, var(--color-shadow-umber));
  --tone-accent-48-error-13-page: color-mix(in srgb, color-mix(in srgb, var(--role-accent) 48%, var(--role-error)) 13%, var(--role-page));
  --tone-overlay-80: rgb(from var(--role-overlay) r g b / 80%);
  --tone-overlay-a133: rgb(from var(--role-overlay) r g b / calc(133 / 255));
  --tone-band-a140: rgb(from var(--role-band) r g b / calc(140 / 255));
  --tone-accent-a115: rgb(from var(--role-accent) r g b / calc(115 / 255));
  --tone-ink-a41: rgb(from var(--role-ink) r g b / calc(41 / 255));
  --tone-on-cream-a41: rgb(from var(--role-on-cream) r g b / calc(41 / 255));
  --tone-surface-66-line-strong: color-mix(in srgb, var(--role-surface) 66%, var(--role-line-strong));
  --tone-line-strong-91-surface: color-mix(in srgb, var(--role-line-strong) 91%, var(--role-surface));
  --tone-band-shade-a217: rgb(from var(--color-band-shade) r g b / calc(217 / 255));
  --tone-ink-a56: rgb(from var(--role-ink) r g b / calc(56 / 255));
  --tone-ink-a199: rgb(from var(--role-ink) r g b / calc(199 / 255));
  --tone-ink-muted-40: rgb(from var(--role-ink-muted) r g b / 40%);
  --tone-accent-a20: rgb(from var(--role-accent) r g b / calc(20 / 255));
  --tone-accent-a77: rgb(from var(--role-accent) r g b / calc(77 / 255));
  --tone-ink-80: rgb(from var(--role-ink) r g b / 80%);
  --tone-overlay-a115: rgb(from var(--role-overlay) r g b / calc(115 / 255));
  --tone-on-band-a38: rgb(from var(--role-on-band) r g b / calc(38 / 255));
  --tone-accent-a41: rgb(from var(--role-accent) r g b / calc(41 / 255));
  --tone-surface-80: rgb(from var(--role-surface) r g b / 80%);
  --tone-success-a31: rgb(from var(--role-success) r g b / calc(31 / 255));
  --tone-on-band-a10: rgb(from var(--role-on-band) r g b / calc(10 / 255));
  --tone-mist-blue-97-7-accent-soft: color-mix(in srgb, var(--color-mist-blue) 97.7%, var(--role-accent-soft));
  --tone-page-83-accent-soft-76-success-light: color-mix(in srgb, color-mix(in srgb, var(--role-page) 83%, var(--role-accent-soft)) 76%, var(--role-success-light));
  --tone-accent-a31: rgb(from var(--role-accent) r g b / calc(31 / 255));
  --tone-ink-a217: rgb(from var(--role-ink) r g b / calc(217 / 255));
  --tone-ink-60: rgb(from var(--role-ink) r g b / 60%);
  --tone-ink-2-94-6-air-sand: color-mix(in srgb, var(--role-ink-2) 94.6%, var(--color-air-sand));
  --tone-harbour-night-20: rgb(from var(--color-harbour-night) r g b / 20%);
  --tone-on-band-a128: rgb(from var(--role-on-band) r g b / calc(128 / 255));
  --tone-accent-a64: rgb(from var(--role-accent) r g b / calc(64 / 255));
  --tone-ink-a209: rgb(from var(--role-ink) r g b / calc(209 / 255));
  --tone-accent-a46: rgb(from var(--role-accent) r g b / calc(46 / 255));
  --tone-band-a230: rgb(from var(--role-band) r g b / calc(230 / 255));
  --tone-page-a230: rgb(from var(--role-page) r g b / calc(230 / 255));
  --tone-on-band-a199: rgb(from var(--role-on-band) r g b / calc(199 / 255));
  --tone-error-a217: rgb(from var(--role-error) r g b / calc(217 / 255));
  --tone-ink-a46: rgb(from var(--role-ink) r g b / calc(46 / 255));
  --tone-overlay-a89: rgb(from var(--role-overlay) r g b / calc(89 / 255));
  --tone-overlay-60: rgb(from var(--role-overlay) r g b / 60%);
  --tone-overlay-a77: rgb(from var(--role-overlay) r g b / calc(77 / 255));
  --tone-band-a191: rgb(from var(--role-band) r g b / calc(191 / 255));
  --tone-harbour-night-a140: rgb(from var(--color-harbour-night) r g b / calc(140 / 255));
  --tone-overlay-a158: rgb(from var(--role-overlay) r g b / calc(158 / 255));
  --tone-overlay-40: rgb(from var(--role-overlay) r g b / 40%);
  --tone-harbour-night-60: rgb(from var(--color-harbour-night) r g b / 60%);
  --tone-harbour-night-a128: rgb(from var(--color-harbour-night) r g b / calc(128 / 255));
  --tone-mist-blue-70-air-sand: color-mix(in srgb, var(--color-mist-blue) 70%, var(--color-air-sand));
  --tone-jet-66-3-band-surface-60: rgb(from color-mix(in srgb, var(--color-jet) 66.3%, var(--role-band-surface)) r g b / 60%);
  --tone-accent-37-ink-2-47-success: color-mix(in srgb, color-mix(in srgb, var(--role-accent) 37%, var(--role-ink-2)) 47%, var(--role-success));
  --tone-jet-66-3-band-surface-a128: rgb(from color-mix(in srgb, var(--color-jet) 66.3%, var(--role-band-surface)) r g b / calc(128 / 255));
  --tone-on-cream-a20: rgb(from var(--role-on-cream) r g b / calc(20 / 255));
  --tone-shadow-umber-a15: rgb(from var(--color-shadow-umber) r g b / calc(15 / 255));
  --tone-jet-66-3-band-surface-a140: rgb(from color-mix(in srgb, var(--color-jet) 66.3%, var(--role-band-surface)) r g b / calc(140 / 255));
  --tone-on-band-a20: rgb(from var(--role-on-band) r g b / calc(20 / 255));
  --tone-on-band-a36: rgb(from var(--role-on-band) r g b / calc(36 / 255));
  --tone-on-band-20: rgb(from var(--role-on-band) r g b / 20%);
  --tone-ink-64-ink-2: color-mix(in srgb, var(--role-ink) 64%, var(--role-ink-2));
  --tone-on-band-a15: rgb(from var(--role-on-band) r g b / calc(15 / 255));
  --tone-on-band-a140: rgb(from var(--role-on-band) r g b / calc(140 / 255));
  --tone-on-band-a31: rgb(from var(--role-on-band) r g b / calc(31 / 255));
  --tone-ink-a77: rgb(from var(--role-ink) r g b / calc(77 / 255));
  --tone-on-band-a184: rgb(from var(--role-on-band) r g b / calc(184 / 255));
  --tone-on-band-60: rgb(from var(--role-on-band) r g b / 60%);
  --tone-on-band-80: rgb(from var(--role-on-band) r g b / 80%);
  --tone-on-band-a26: rgb(from var(--role-on-band) r g b / calc(26 / 255));
  --tone-on-band-a77: rgb(from var(--role-on-band) r g b / calc(77 / 255));
  --tone-ink-a10: rgb(from var(--role-ink) r g b / calc(10 / 255));
  --tone-on-band-a41: rgb(from var(--role-on-band) r g b / calc(41 / 255));
  --tone-ink-a230: rgb(from var(--role-ink) r g b / calc(230 / 255));
  --tone-ink-a38: rgb(from var(--role-ink) r g b / calc(38 / 255));
  --tone-form-glass-40: rgb(from var(--color-form-glass) r g b / 40%);
  --tone-glass-strong: rgb(from var(--role-overlay) r g b / calc(140 / 255));
  --tone-glass-tint: rgb(from var(--role-overlay) r g b / calc(107 / 255));
  --tone-glass-medium: rgb(from var(--role-overlay) r g b / calc(128 / 255));
  --tone-overlay-92: color-mix(in srgb, var(--role-overlay) 92%, transparent);
  --tone-tone-dark-line: rgb(from var(--color-white) r g b / 16%);
}

/* 4b. Photo areas: text inside that reads the page colour reads Text on photos instead (same colour in Original) */
.home1-hero_shade,
.home1-hero_fade,
.cta-band_shade,
.contact3-hero_shade,
.glass-panel,
.chip-glass,
.glass-arrow,
.services1-hero_stats,
.home1-hero_card,
.services2-modes_menu,
.home1-hero_video-control,
.home3-hero_video-control {
  --role-page: var(--color-shell);
  --role-on-band: var(--role-on-photo);
  --role-on-ink: var(--role-on-photo);
  --tone-page-80: rgb(from var(--role-page) r g b / 80%);
  --tone-accent-48-error-13-page: color-mix(in srgb, color-mix(in srgb, var(--role-accent) 48%, var(--role-error)) 13%, var(--role-page));
  --tone-page-83-accent-soft-76-success-light: color-mix(in srgb, color-mix(in srgb, var(--role-page) 83%, var(--role-accent-soft)) 76%, var(--role-success-light));
  --tone-page-a230: rgb(from var(--role-page) r g b / calc(230 / 255));
  --button-light-bg: var(--role-on-band-outer);
  --button-primary-text: var(--role-on-ink-outer);
}
:root,
[data-theme] {
  --role-on-band-outer: var(--role-on-band);
  --role-on-ink-outer: var(--role-on-ink);
}
:root,
[data-theme] {
  --role-page-outer: var(--role-page);
}
.home1-hero_shade :is(input, select, textarea),
.home1-hero_fade :is(input, select, textarea),
.cta-band_shade :is(input, select, textarea),
.contact3-hero_shade :is(input, select, textarea),
.glass-panel :is(input, select, textarea),
.chip-glass :is(input, select, textarea),
.glass-arrow :is(input, select, textarea),
.services1-hero_stats :is(input, select, textarea),
.home1-hero_card :is(input, select, textarea),
.services2-modes_menu :is(input, select, textarea),
.home1-hero_video-control :is(input, select, textarea),
.home3-hero_video-control :is(input, select, textarea) {
  --role-page: var(--role-page-outer);
  --role-on-band: var(--role-on-band-outer);
  --role-on-ink: var(--role-on-ink-outer);
}

/* 4d. Cream buttons: rust arrow in every theme */
.w-variant-11a713fb-d6a1-9087-c32a-d69986956267,
.w-variant-875b3967-d60b-f965-9d53-902389c60b30,
.w-variant-af60d651-d042-8937-268d-dcb595661f79,
.w-variant-aaf225a7-92e1-771a-af0e-bc43ce079e38,
.w-variant-df99933e-ecb9-dfb1-2b30-675a8549d49b,
.is-on-dark,
.footer_track-button,
.nav-cta_solid {
  --role-accent: var(--color-container-rust);
  --tone-accent-35-error-61-shadow-umber: color-mix(in srgb, color-mix(in srgb, var(--role-accent) 35%, var(--role-error)) 61%, var(--color-shadow-umber));
  --tone-accent-48-error-13-page: color-mix(in srgb, color-mix(in srgb, var(--role-accent) 48%, var(--role-error)) 13%, var(--role-page));
  --tone-accent-a115: rgb(from var(--role-accent) r g b / calc(115 / 255));
  --tone-accent-a20: rgb(from var(--role-accent) r g b / calc(20 / 255));
  --tone-accent-a77: rgb(from var(--role-accent) r g b / calc(77 / 255));
  --tone-accent-a41: rgb(from var(--role-accent) r g b / calc(41 / 255));
  --tone-mist-blue-97-7-accent-soft: color-mix(in srgb, var(--color-mist-blue) 97.7%, var(--role-accent-soft));
  --tone-page-83-accent-soft-76-success-light: color-mix(in srgb, color-mix(in srgb, var(--role-page) 83%, var(--role-accent-soft)) 76%, var(--role-success-light));
  --tone-accent-a31: rgb(from var(--role-accent) r g b / calc(31 / 255));
  --tone-accent-a64: rgb(from var(--role-accent) r g b / calc(64 / 255));
  --tone-accent-a46: rgb(from var(--role-accent) r g b / calc(46 / 255));
  --tone-accent-37-ink-2-47-success: color-mix(in srgb, color-mix(in srgb, var(--role-accent) 37%, var(--role-ink-2)) 47%, var(--role-success));
}

/* 5. Fonts */
:root {
  --font-heading: Newsreader, sans-serif;
  --font-body: "Instrument Sans", sans-serif;
  --font-label: "DM Mono", sans-serif;
}

/* 6. Text sizes: three scales (S 0.9, M 1, L 1.1). Every font size is a size token times its scale.
   Tokens keep the unit of the value they replace: px by number (--size-14), other units in the name (--size-1-25rem). */
:root {
  --scale-headings: 1;
  --scale-body: 1;
  --scale-labels: 1;
  --size-h1: 4rem;
  --size-h2: 3rem;
  --size-h3: 2rem;
  --size-h4: 1.5rem;
  --size-h5: 1.125rem;
  --size-h6: 1rem;
  --size-display: 4.75rem;
  --size-number: 3.5rem;
  --size-body-medium: 1rem;
  --size-body-large: 1.125rem;
  --size-body-x-large: 1.25rem;
  --size-body-small: .875rem;
  --size-hero-xl: 5.5rem;
  --size-lead: 1.125rem;
  --size-meta: .875rem;
  --size-caption: .8125rem;
  --size-body-tiny: .75rem;
  --size-text-responsive: 1rem;
  --size-stat: 1.625rem;
  --size-title-medium: 2rem;
  --size-quote: 2.25rem;
  --size-title-small: 1.5rem;
  --size-lead-responsive: 1.125rem;
  --size-hero-home: 5.5rem;
  --size-metric: 2rem;
  --size-link: 1rem;
  --size-hero-article: 4.25rem;
  --size-price: 4.5rem;
  --size-button-normal: .9375rem;
  --size-badge: .6875rem;
  --size-button-small: .875rem;
  --size-22: 22px;
  --size-28: 28px;
  --size-88: 88px;
  --size-14: 14px;
  --size-19: 19px;
  --size-40: 40px;
  --size-48: 48px;
  --size-21: 21px;
  --size-300: 300px;
  --size-2-5rem: 2.5rem;
  --size-17: 17px;
  --size-420: 420px;
  --size-380: 380px;
  --size-10: 10px;
  --size-8: 8px;
  --size-64: 64px;
  --size-72: 72px;
  --size-56: 56px;
  --size-190: 190px;
  --size-180: 180px;
  --size-44: 44px;
  --size-2-8rem: 2.8rem;
  --size-52: 52px;
  --leading-body-medium: 155%;
  --leading-h1: 100%;
  --leading-h2: 105%;
  --leading-h4: 125%;
  --leading-h5: 130%;
  --leading-h6: 135%;
  --leading-body-large: 155%;
  --leading-relaxed: 150%;
  --leading-badge: 130%;
  --leading-button-normal: 155%;
  --leading-body-small: 155%;
  --leading-comfortable: 140%;
  --leading-display-tight: 108%;
  --leading-title: 114%;
  --leading-h3: 120%;
  --leading-body-tiny: 155%;
  --leading-button-small: 155%;
  --leading-heading-snug: 110%;
  --leading-text-normal: 145%;
  --leading-lead: 156%;
  --leading-text-compact: 143%;
  --leading-heading-tight: 104%;
  --leading-display: 95%;
  --leading-124: 1.24;
  --leading-18: 18px;
  --leading-090: .9;
  --leading-20: 20px;
  --leading-114: 1.14;
  --leading-190: 1.9;
  --leading-117: 1.17;
  --leading-16: 16px;
  --leading-8: 8px;
  --leading-100: 1;
  --tracking-0-06em: .06em;
  --tracking-n0-015em: -.015em;
  --tracking-n0-01em: -.01em;
  --tracking-n0-02em: -.02em;
  --tracking-n0-025em: -.025em;
  --tracking-0-08em: .08em;
  --tracking-n0-06em: -.06em;
  --tracking-0-18em: .18em;
  --tracking-n0-005em: -.005em;
  --tracking-0-1em: .1em;
}

/* 7. Spacing: 4px base. Values off the 4px grid keep their own token; rem values keep rem. */
:root {
  --container-width: 1344px;
  --section-spacing: 1;
  --section-padding-medium: 80px;
  --section-padding-large: 120px;
  --section-padding-small: 48px;
  --spacing-1: 1px;
  --spacing-2: 2px;
  --spacing-3: 3px;
  --spacing-4: 4px;
  --spacing-5: 5px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-9: 9px;
  --spacing-10: 10px;
  --spacing-11: 11px;
  --spacing-12: 12px;
  --spacing-13: 13px;
  --spacing-14: 14px;
  --spacing-15: 15px;
  --spacing-16: 16px;
  --spacing-18: 18px;
  --spacing-20: 20px;
  --spacing-22: 22px;
  --spacing-24: 24px;
  --spacing-26: 26px;
  --spacing-28: 28px;
  --spacing-30: 30px;
  --spacing-32: 32px;
  --spacing-36: 36px;
  --spacing-39: 39px;
  --spacing-40: 40px;
  --spacing-43: 43px;
  --spacing-44: 44px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-58: 58px;
  --spacing-64: 64px;
  --spacing-72: 72px;
  --spacing-80: 80px;
  --spacing-96: 96px;
  --spacing-104: 104px;
  --spacing-112: 112px;
  --spacing-120: 120px;
  --spacing-128: 128px;
  --spacing-136: 136px;
  --spacing-140: 140px;
  --spacing-144: 144px;
  --spacing-150: 150px;
  --spacing-152: 152px;
  --spacing-160: 160px;
  --spacing-164: 164px;
  --spacing-168: 168px;
  --spacing-184: 184px;
  --spacing-192: 192px;
  --spacing-200: 200px;
  --spacing-240: 240px;
  --spacing-320: 320px;
  --spacing-672: 672px;
  --spacing-0-5rem: .5rem;
  --spacing-0-25em: .25em;
  --spacing-1-5rem: 1.5rem;
  --spacing-1-25rem: 1.25rem;
  --spacing-0-375rem: .375rem;
  --spacing-1rem: 1rem;
  --spacing-0-4em: .4em;
  --spacing-0-6rem: .6rem;
  --spacing-0-75rem: .75rem;
}

/* 7b. Breakpoint values for the role sizes, section paddings and other responsive tokens */
@media screen and (max-width: 991px) {
  :root {
    --size-h1: 3.25rem;
    --size-h2: 2.5rem;
    --size-h3: 1.75rem;
    --size-h4: 1.375rem;
    --size-display: 3.75rem;
    --size-number: 2.75rem;
    --size-hero-xl: 4rem;
    --size-quote: 1.875rem;
    --size-hero-home: 4rem;
    --size-hero-article: 3.5rem;
    --size-price: 3.5rem;
    --section-padding-medium: 64px;
    --section-padding-large: 96px;
    --section-padding-small: 44px;
  }
}
@media screen and (max-width: 767px) {
  :root {
    --size-h1: 2.625rem;
    --size-h2: 2.25rem;
    --size-h3: 1.625rem;
    --size-h4: 1.25rem;
    --size-h5: 1.0625rem;
    --size-display: 3rem;
    --size-number: 2.5rem;
    --size-body-large: 1.0625rem;
    --size-hero-xl: 2.75rem;
    --size-quote: 1.625rem;
    --size-lead-responsive: 1rem;
    --size-hero-home: 2.5rem;
    --size-metric: 1.5rem;
    --size-link: .9375rem;
    --size-hero-article: 2.5rem;
    --size-price: 2.75rem;
    --section-padding-medium: 56px;
    --section-padding-large: 80px;
    --section-padding-small: 40px;
  }
}
@media screen and (max-width: 479px) {
  :root {
    --size-h1: 2.375rem;
    --size-h2: 2rem;
    --size-h3: 1.5rem;
    --size-h4: 1.25rem;
    --size-h5: 1.0625rem;
    --size-display: 2.75rem;
    --size-number: 2.25rem;
    --size-body-large: 1.0625rem;
    --size-hero-xl: 2.75rem;
    --size-meta: .75rem;
    --size-text-responsive: .875rem;
    --size-quote: 1.5rem;
    --size-lead-responsive: 1rem;
    --size-hero-home: 2.5rem;
    --size-metric: 1.5rem;
    --size-link: .9375rem;
    --size-hero-article: 2.5rem;
    --size-price: 2.75rem;
    --section-padding-medium: 48px;
    --section-padding-large: 72px;
    --section-padding-small: 40px;
  }
}

/* 8. Corners: every corner follows --radius-card in proportion. Pills follow --radius-button.
   rem corners are worked out in px from --radius-card (corners are not text, so they do not need to follow the browser font size). */
:root {
  --radius-card: 12px;
  --radius-button: 8px;
  --radius-pill: var(--radius-button);
  --radius-round: 999px;
  --radius-2: calc(var(--radius-card) * 2 / 12);
  --radius-3: calc(var(--radius-card) * 3 / 12);
  --radius-4: calc(var(--radius-card) * 4 / 12);
  --radius-5: calc(var(--radius-card) * 5 / 12);
  --radius-6: calc(var(--radius-card) * 6 / 12);
  --radius-8: calc(var(--radius-card) * 8 / 12);
  --radius-9: calc(var(--radius-card) * 9 / 12);
  --radius-10: calc(var(--radius-card) * 10 / 12);
  --radius-14: calc(var(--radius-card) * 14 / 12);
  --radius-16: calc(var(--radius-card) * 16 / 12);
  --radius-20: calc(var(--radius-card) * 20 / 12);
  --radius-22: calc(var(--radius-card) * 22 / 12);
  --radius-24: calc(var(--radius-card) * 24 / 12);
  --radius-28: calc(var(--radius-card) * 28 / 12);
}

/* 9. Buttons: read-only, they follow the roles and --radius-button */
:root,
[data-theme] {
  --button-primary-bg: var(--role-ink);
  --button-primary-text: var(--role-on-ink);
  --button-primary-bg-hover: var(--role-ink-2);
  --button-light-bg: var(--role-on-band);
  --button-light-text: var(--role-on-cream);
}

/* 10. Shadows and focus */
:root,
[data-theme] {
  --shadow-1: 0 0 3px 1px var(--role-accent);
  --shadow-2: 0 2px 0 0 var(--color--neutral--shade-50), 0 -2px 0 0 var(--tone-mist-blue-70-air-sand);
  --shadow-3: 0 40px 80px -40px var(--tone-jet-66-3-band-surface-60);
  --shadow-4: 0 0 0 1px var(--tone-accent-37-ink-2-47-success);
  --shadow-5: 0 30px 60px -20px var(--tone-jet-66-3-band-surface-a128);
  --shadow-6: 0 12px 32px var(--tone-on-cream-a20);
  --shadow-7: 0 12px 32px var(--tone-on-cream-a41);
  --shadow-8: 0 0 0 5px var(--tone-accent-a64);
  --shadow-9: 0 24px 48px var(--tone-on-cream-a41);
  --shadow-10: 0 12px 32px var(--tone-shadow-umber-a15);
  --shadow-11: 0 32px 64px -24px var(--tone-jet-66-3-band-surface-a140);
  --focus-ring: var(--role-accent);
}

/* 11. Motion */
:root {
  --motion-fast: .2s;
  --motion-base: .3s;
  --motion-0-15s: .15s;
  --motion-slow: .6s;
  --motion-calm: .5s;
  --motion-medium: .4s;
  --motion-0-35s: .35s;
  --ease-1: cubic-bezier(.22,.61,.36,1);
}

/* 12. Breakpoints (for reference; media queries cannot read custom properties)
   desktop: min-width 992px
   tablet: max-width 991px
   mobile-landscape: max-width 767px
   mobile: max-width 479px */