/* Lattis design system: theme.css (palette, roles, themes and every token).
   Generated by _tools/design-system/generate.mjs from _tools/design-system/maps/lattis.mjs (with lattis.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-white: #ffffff;
  --color-cloud: #f5f5f7;
  --color-haze: #ededf1;
  --color-line-grey: #dedee4;
  --color-steel-line: #cfcfd7;
  --color-pewter: #b3b3bd;
  --color-ink: #111114;
  --color-graphite: #2a2a31;
  --color-slate: #5f5f69;
  --color-stone: #6b6b75;
  --color-mist-grey: #9a9aa5;
  --color-inverse: #0a0a0b;
  --color-scrim-navy: #06081a;
  --color-cobalt: #3b63e6;
  --color-deep-cobalt: #2a4bc0;
  --color-cobalt-wash: #e6ecff;
  --color-periwinkle: #9db7ff;
  --color-night: #09090b;
  --color-night-ink: #f2f2f0;
  --color-night-surface: #121216;
  --color-night-panel: #1a1a1c;
  --color-night-100: #18181d;
  --color-night-line: #26262d;
  --color-night-300: #303038;
  --color-night-400: #3e3e47;
  --color-night-stone: #8c8c96;
  --color-night-500: #70707a;
  --color-night-inverse: #141419;
  --color-night-700: #9a9aa1;
  --color-night-800: #c9c9cf;
  --color-pale-cobalt: #c3d2ff;
  --color-night-cobalt: #18234a;
  --color-jet: #000000;
  --color-error-red: #d64545;
  --color-night-error: #ff7a7a;
  --color-figma-orange: #f24e1e;
  --color-figma-coral: #ff7262;
  --color-figma-purple: #a259ff;
  --color-figma-blue: #1abcfe;
  --color-figma-green: #0acf83;
}

/* 2. Colour roles: Original */
:root {
  --role-ink: var(--color-ink);
  --role-page: var(--color-white);
  --role-surface: var(--color-cloud);
  --role-accent: var(--color-cobalt);
  --role-accent-deep: var(--color-deep-cobalt);
  --role-line: var(--color-line-grey);
  --role-on-photo: var(--color-white);
  --role-overlay: var(--color-scrim-navy);
  --role-surface-2: var(--color-haze);
  --role-line-strong: var(--color-steel-line);
  --role-line-dark: var(--color-pewter);
  --role-ink-soft: var(--color-stone);
  --role-ink-muted: var(--color-slate);
  --role-ink-2: var(--color-graphite);
  --role-ink-faint: var(--color-mist-grey);
  --role-inverse: var(--color-inverse);
  --role-accent-soft: var(--color-cobalt-wash);
  --role-accent-muted: var(--color-periwinkle);
  --role-error: var(--color-error-red);
  --role-band: var(--color-night);
  --role-on-band: var(--color-night-ink);
  --role-band-surface: var(--color-night-surface);
  --role-band-line: var(--color-night-line);
  --role-band-ink-soft: var(--color-night-stone);
  --role-band-accent: var(--color-periwinkle);
  --role-band-accent-deep: var(--color-pale-cobalt);
  --role-band-accent-soft: var(--color-night-cobalt);
}

/* 3. Themes: each sets every role. Photo overlay stays dark in every theme. */
[data-theme="original"] {
  --role-ink: var(--color-ink);
  --role-page: var(--color-white);
  --role-surface: var(--color-cloud);
  --role-accent: var(--color-cobalt);
  --role-accent-deep: var(--color-deep-cobalt);
  --role-line: var(--color-line-grey);
  --role-on-photo: var(--color-white);
  --role-overlay: var(--color-scrim-navy);
  --role-surface-2: var(--color-haze);
  --role-line-strong: var(--color-steel-line);
  --role-line-dark: var(--color-pewter);
  --role-ink-soft: var(--color-stone);
  --role-ink-muted: var(--color-slate);
  --role-ink-2: var(--color-graphite);
  --role-ink-faint: var(--color-mist-grey);
  --role-inverse: var(--color-inverse);
  --role-accent-soft: var(--color-cobalt-wash);
  --role-accent-muted: var(--color-periwinkle);
  --role-error: var(--color-error-red);
  --role-band: var(--color-night);
  --role-on-band: var(--color-night-ink);
  --role-band-surface: var(--color-night-surface);
  --role-band-line: var(--color-night-line);
  --role-band-ink-soft: var(--color-night-stone);
  --role-band-accent: var(--color-periwinkle);
  --role-band-accent-deep: var(--color-pale-cobalt);
  --role-band-accent-soft: var(--color-night-cobalt);
}
[data-theme="model-lab"] {
  color-scheme: light;
  --role-ink: #0c1716;
  --role-page: #fbfdfd;
  --role-surface: #f1f6f6;
  --role-accent: #0d7a72;
  --role-accent-deep: #0a5c56;
  --role-line: #d8e3e2;
  --role-on-photo: #ffffff;
  --role-overlay: #06081a;
  --role-surface-2: #e7efee;
  --role-line-strong: #c6d4d3;
  --role-line-dark: #a6b8b6;
  --role-ink-soft: #5a6b6a;
  --role-ink-muted: #4f605f;
  --role-ink-2: #203130;
  --role-ink-faint: #8fa3a1;
  --role-inverse: #071211;
  --role-accent-soft: #dcf1ee;
  --role-accent-muted: #8fd4cc;
  --role-error: #c63d3d;
  --role-band: #071413;
  --role-on-band: #eef6f5;
  --role-band-surface: #0e1d1c;
  --role-band-line: #1f3231;
  --role-band-ink-soft: #8aa09e;
  --role-band-accent: #7fd6cb;
  --role-band-accent-deep: #b8ece5;
  --role-band-accent-soft: #0f3532;
}
[data-theme="violet-ship"] {
  color-scheme: light;
  --role-ink: #140f1d;
  --role-page: #fffdff;
  --role-surface: #f7f4fb;
  --role-accent: #6d3fd6;
  --role-accent-deep: #5530ab;
  --role-line: #e3dcec;
  --role-on-photo: #ffffff;
  --role-overlay: #06081a;
  --role-surface-2: #efe9f6;
  --role-line-strong: #d3c9e0;
  --role-line-dark: #b7aac9;
  --role-ink-soft: #6a6275;
  --role-ink-muted: #5e566a;
  --role-ink-2: #2c2537;
  --role-ink-faint: #9b91a8;
  --role-inverse: #0c0812;
  --role-accent-soft: #efe6ff;
  --role-accent-muted: #c4aaff;
  --role-error: #cf3f4f;
  --role-band: #0e0a16;
  --role-on-band: #f4f0fa;
  --role-band-surface: #16111f;
  --role-band-line: #2a2238;
  --role-band-ink-soft: #968ca6;
  --role-band-accent: #c4aaff;
  --role-band-accent-deep: #ddd0ff;
  --role-band-accent-soft: #2a1a4d;
}
[data-theme="sandbox"] {
  color-scheme: light;
  --role-ink: #1c1510;
  --role-page: #fffcf8;
  --role-surface: #f8f4ee;
  --role-accent: #b24a14;
  --role-accent-deep: #8c3a10;
  --role-line: #e9e0d4;
  --role-on-photo: #ffffff;
  --role-overlay: #06081a;
  --role-surface-2: #f1eadf;
  --role-line-strong: #dbcfbf;
  --role-line-dark: #c2b39f;
  --role-ink-soft: #72675c;
  --role-ink-muted: #665b50;
  --role-ink-2: #33291f;
  --role-ink-faint: #a5998b;
  --role-inverse: #100b07;
  --role-accent-soft: #fbe7da;
  --role-accent-muted: #f2b48f;
  --role-error: #c43a3a;
  --role-band: #120d09;
  --role-on-band: #f6f1ea;
  --role-band-surface: #1b1510;
  --role-band-line: #30271f;
  --role-band-ink-soft: #a09382;
  --role-band-accent: #f2b48f;
  --role-band-accent-deep: #f8d3bd;
  --role-band-accent-soft: #3d2214;
}
[data-theme="night-inference"] {
  color-scheme: dark;
  --role-ink: #f2f2f0;
  --role-page: #09090b;
  --role-surface: #121216;
  --role-accent: #9db7ff;
  --role-accent-deep: #c3d2ff;
  --role-line: #26262d;
  --role-on-photo: #ffffff;
  --role-overlay: #06081a;
  --role-surface-2: #18181d;
  --role-line-strong: #303038;
  --role-line-dark: #3e3e47;
  --role-ink-soft: #8c8c96;
  --role-ink-muted: #9a9aa1;
  --role-ink-2: #c9c9cf;
  --role-ink-faint: #70707a;
  --role-inverse: #141419;
  --role-accent-soft: #18234a;
  --role-accent-muted: #3b63e6;
  --role-error: #ff7a7a;
  --role-band: #141419;
  --role-on-band: #f2f2f0;
  --role-band-surface: #1b1b21;
  --role-band-line: #2e2e36;
  --role-band-ink-soft: #9696a0;
  --role-band-accent: #9db7ff;
  --role-band-accent-deep: #c3d2ff;
  --role-band-accent-soft: #1d2a57;
}
[data-theme="inverted"] {
  color-scheme: dark;
  --role-ink: #ffffff;
  --role-page: #000000;
  --role-surface: #0e0e10;
  --role-accent: #8fa8ff;
  --role-accent-deep: #b8c8ff;
  --role-line: #26262b;
  --role-on-photo: #ffffff;
  --role-overlay: #06081a;
  --role-surface-2: #151518;
  --role-line-strong: #303036;
  --role-line-dark: #45454d;
  --role-ink-soft: #a3a3ad;
  --role-ink-muted: #b0b0b8;
  --role-ink-2: #dcdce2;
  --role-ink-faint: #6e6e78;
  --role-inverse: #f5f5f7;
  --role-accent-soft: #15204a;
  --role-accent-muted: #3b63e6;
  --role-error: #ff7a7a;
  --role-band: #161619;
  --role-on-band: #f2f2f0;
  --role-band-surface: #1d1d22;
  --role-band-line: #2e2e36;
  --role-band-ink-soft: #9696a0;
  --role-band-accent: #8fa8ff;
  --role-band-accent-deep: #c3d2ff;
  --role-band-accent-soft: #1d2a57;
}

/* 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-on-band-76-night-700: color-mix(in srgb, var(--role-on-band) 76%, var(--color-night-700));
  --tone-inverse-10-figma-blue-77-figma-purple: color-mix(in srgb, color-mix(in srgb, var(--role-inverse) 10%, var(--color-figma-blue)) 77%, var(--color-figma-purple));
  --tone-page-64-on-band: color-mix(in srgb, var(--role-page) 64%, var(--role-on-band));
  --tone-on-band-80-2-night-300: color-mix(in srgb, var(--role-on-band) 80.2%, var(--color-night-300));
  --tone-jet-86-5-page: color-mix(in srgb, var(--color-jet) 86.5%, var(--role-page));
  --tone-jet-80-page: color-mix(in srgb, var(--color-jet) 80%, var(--role-page));
  --tone-on-band-79-ink-2: color-mix(in srgb, var(--role-on-band) 79%, var(--role-ink-2));
  --tone-on-band-60-3-ink: color-mix(in srgb, var(--role-on-band) 60.3%, var(--role-ink));
  --tone-ink-42-figma-blue-16-ink-soft: color-mix(in srgb, color-mix(in srgb, var(--role-ink) 42%, var(--color-figma-blue)) 16%, var(--role-ink-soft));
  --tone-jet-40: rgb(from var(--color-jet) r g b / 40%);
  --tone-page-a191: rgb(from var(--role-page) r g b / calc(191 / 255));
  --tone-page-a235: rgb(from var(--role-page) r g b / calc(235 / 255));
  --tone-overlay-80: rgb(from var(--role-overlay) r g b / 80%);
  --tone-overlay-a217: rgb(from var(--role-overlay) r g b / calc(217 / 255));
  --tone-overlay-a89: rgb(from var(--role-overlay) r g b / calc(89 / 255));
  --tone-overlay-a26: rgb(from var(--role-overlay) r g b / calc(26 / 255));
  --tone-page-a219: rgb(from var(--role-page) r g b / calc(219 / 255));
  --tone-page-a184: rgb(from var(--role-page) r g b / calc(184 / 255));
  --tone-page-a209: rgb(from var(--role-page) r g b / calc(209 / 255));
  --tone-page-a189: rgb(from var(--role-page) r g b / calc(189 / 255));
  --tone-ink-92: color-mix(in srgb, var(--role-ink) 92%, transparent);
  --tone-ink-95-figma-blue-33-surface: color-mix(in srgb, color-mix(in srgb, var(--role-ink) 95%, var(--color-figma-blue)) 33%, var(--role-surface));
  --tone-on-band-84-band-ink-soft: color-mix(in srgb, var(--role-on-band) 84%, var(--role-band-ink-soft));
  --tone-page-75-night-error: color-mix(in srgb, var(--role-page) 75%, var(--color-night-error));
  --tone-on-band-80-line: color-mix(in srgb, var(--role-on-band) 80%, var(--role-line));
  --tone-on-band-51-surface: color-mix(in srgb, var(--role-on-band) 51%, var(--role-surface));
  --tone-ink-49-accent-soft-91-figma-blue: color-mix(in srgb, color-mix(in srgb, var(--role-ink) 49%, var(--role-accent-soft)) 91%, var(--color-figma-blue));
  --tone-jet-86-5-page-40: rgb(from color-mix(in srgb, var(--color-jet) 86.5%, var(--role-page)) r g b / 40%);
  --tone-page-40: rgb(from var(--role-page) r g b / 40%);
  --tone-jet-90: rgb(from var(--color-jet) r g b / 90%);
  --tone-night-panel-59-band-surface: color-mix(in srgb, var(--color-night-panel) 59%, var(--role-band-surface));
  --tone-tone-dark-line: rgb(from var(--role-on-photo) r g b / 16%);
  --tone-static-white-60: rgb(from var(--role-on-photo) r g b / calc(153 / 255));
  --tone-static-white-90: rgb(from var(--role-on-photo) r g b / calc(230 / 255));
  --tone-static-white-10: rgb(from var(--role-on-photo) r g b / calc(26 / 255));
  --tone-static-white-8: rgb(from var(--role-on-photo) r g b / calc(20 / 255));
  --tone-static-white-16: rgb(from var(--role-on-photo) r g b / calc(41 / 255));
  --tone-static-white-28: rgb(from var(--role-on-photo) r g b / calc(71 / 255));
  --tone-static-white-7: rgb(from var(--role-on-photo) r g b / calc(18 / 255));
  --tone-static-white-55: rgb(from var(--role-on-photo) r g b / calc(140 / 255));
  --tone-static-white-96: rgb(from var(--role-on-photo) r g b / calc(245 / 255));
  --tone-static-white-24: rgb(from var(--role-on-photo) r g b / calc(61 / 255));
  --tone-static-white-50: rgb(from var(--role-on-photo) r g b / calc(128 / 255));
  --tone-static-white-48: rgb(from var(--role-on-photo) r g b / calc(122 / 255));
  --tone-static-ink-56: rgb(from var(--color-ink) r g b / calc(143 / 255));
  --tone-static-ink-80: rgb(from var(--color-ink) r g b / calc(204 / 255));
  --tone-shadow-a13: rgb(from var(--color-ink) r g b / calc(13 / 255));
  --tone-shadow-a20: rgb(from var(--color-ink) r g b / calc(20 / 255));
  --tone-shadow-a31: rgb(from var(--color-ink) r g b / calc(31 / 255));
  --tone-shadow-a36: rgb(from var(--color-ink) r g b / calc(36 / 255));
  --tone-shadow-a15: rgb(from var(--color-ink) r g b / calc(15 / 255));
  --tone-shadow-a26: rgb(from var(--color-ink) r g b / calc(26 / 255));
  --tone-shadow-40: rgb(from var(--color-ink) r g b / 40%);
  --tone-shadow-a41: rgb(from var(--color-ink) r g b / calc(41 / 255));
  --tone-shadow-a61: rgb(from var(--color-ink) r g b / calc(61 / 255));
}

/* 4b. Photo areas: text inside that reads the page colour reads Text on photos instead (same colour in Original) */
.h2-top_overlay {
  --role-page: var(--role-on-photo);
  --button-primary-text: var(--role-page-outer);
  --button-secondary-bg: var(--role-page-outer);
  --tone-page-64-on-band: color-mix(in srgb, var(--role-page) 64%, var(--role-on-band));
  --tone-jet-86-5-page: color-mix(in srgb, var(--color-jet) 86.5%, var(--role-page));
  --tone-jet-80-page: color-mix(in srgb, var(--color-jet) 80%, var(--role-page));
  --tone-page-a191: rgb(from var(--role-page) r g b / calc(191 / 255));
  --tone-page-a235: rgb(from var(--role-page) r g b / calc(235 / 255));
  --tone-page-a219: rgb(from var(--role-page) r g b / calc(219 / 255));
  --tone-page-a184: rgb(from var(--role-page) r g b / calc(184 / 255));
  --tone-page-a209: rgb(from var(--role-page) r g b / calc(209 / 255));
  --tone-page-a189: rgb(from var(--role-page) r g b / calc(189 / 255));
  --tone-page-75-night-error: color-mix(in srgb, var(--role-page) 75%, var(--color-night-error));
  --tone-jet-86-5-page-40: rgb(from color-mix(in srgb, var(--color-jet) 86.5%, var(--role-page)) r g b / 40%);
  --tone-page-40: rgb(from var(--role-page) r g b / 40%);
}
:root,
[data-theme] {
  --role-page-outer: var(--role-page);
}
.h2-top_overlay :is(input, select, textarea) {
  --role-page: var(--role-page-outer);
}

/* 4c2. Root copies of roles: a block inside a swapped block reads the page's own value from these */
:root,
[data-theme] {
  --role-page-root: var(--role-page);
  --role-ink-root: var(--role-ink);
  --role-surface-root: var(--role-surface);
  --role-surface-2-root: var(--role-surface-2);
  --role-line-root: var(--role-line);
  --role-line-strong-root: var(--role-line-strong);
  --role-line-dark-root: var(--role-line-dark);
  --role-ink-soft-root: var(--role-ink-soft);
  --role-ink-muted-root: var(--role-ink-muted);
  --role-ink-2-root: var(--role-ink-2);
  --role-ink-faint-root: var(--role-ink-faint);
  --role-inverse-root: var(--role-inverse);
  --role-accent-root: var(--role-accent);
  --role-accent-deep-root: var(--role-accent-deep);
  --role-accent-soft-root: var(--role-accent-soft);
  --role-accent-muted-root: var(--role-accent-muted);
  --role-error-root: var(--role-error);
}

/* 4d. Dark panels and dark mode (.theme-dark): every page role reads its dark panel role */
.theme-dark {
  --role-page: var(--role-band);
  --role-ink: var(--role-on-band);
  --role-surface: var(--role-band-surface);
  --role-surface-2: var(--color-night-100);
  --role-line: var(--role-band-line);
  --role-line-strong: var(--color-night-300);
  --role-line-dark: var(--color-night-400);
  --role-ink-soft: var(--role-band-ink-soft);
  --role-ink-muted: var(--color-night-700);
  --role-ink-2: var(--color-night-800);
  --role-ink-faint: var(--color-night-500);
  --role-inverse: var(--color-night-inverse);
  --role-accent: var(--role-band-accent);
  --role-accent-deep: var(--role-band-accent-deep);
  --role-accent-soft: var(--role-band-accent-soft);
  --role-accent-muted: var(--role-accent-root);
  --role-error: var(--color-night-error);
  --tone-inverse-10-figma-blue-77-figma-purple: color-mix(in srgb, color-mix(in srgb, var(--role-inverse) 10%, var(--color-figma-blue)) 77%, var(--color-figma-purple));
  --tone-page-64-on-band: color-mix(in srgb, var(--role-page) 64%, var(--role-on-band));
  --tone-jet-86-5-page: color-mix(in srgb, var(--color-jet) 86.5%, var(--role-page));
  --tone-jet-80-page: color-mix(in srgb, var(--color-jet) 80%, var(--role-page));
  --tone-on-band-79-ink-2: color-mix(in srgb, var(--role-on-band) 79%, var(--role-ink-2));
  --tone-on-band-60-3-ink: color-mix(in srgb, var(--role-on-band) 60.3%, var(--role-ink));
  --tone-ink-42-figma-blue-16-ink-soft: color-mix(in srgb, color-mix(in srgb, var(--role-ink) 42%, var(--color-figma-blue)) 16%, var(--role-ink-soft));
  --tone-page-a191: rgb(from var(--role-page) r g b / calc(191 / 255));
  --tone-page-a235: rgb(from var(--role-page) r g b / calc(235 / 255));
  --tone-page-a219: rgb(from var(--role-page) r g b / calc(219 / 255));
  --tone-page-a184: rgb(from var(--role-page) r g b / calc(184 / 255));
  --tone-page-a209: rgb(from var(--role-page) r g b / calc(209 / 255));
  --tone-page-a189: rgb(from var(--role-page) r g b / calc(189 / 255));
  --tone-ink-92: color-mix(in srgb, var(--role-ink) 92%, transparent);
  --tone-ink-95-figma-blue-33-surface: color-mix(in srgb, color-mix(in srgb, var(--role-ink) 95%, var(--color-figma-blue)) 33%, var(--role-surface));
  --tone-page-75-night-error: color-mix(in srgb, var(--role-page) 75%, var(--color-night-error));
  --tone-on-band-80-line: color-mix(in srgb, var(--role-on-band) 80%, var(--role-line));
  --tone-on-band-51-surface: color-mix(in srgb, var(--role-on-band) 51%, var(--role-surface));
  --tone-ink-49-accent-soft-91-figma-blue: color-mix(in srgb, color-mix(in srgb, var(--role-ink) 49%, var(--role-accent-soft)) 91%, var(--color-figma-blue));
  --tone-jet-86-5-page-40: rgb(from color-mix(in srgb, var(--color-jet) 86.5%, var(--role-page)) r g b / 40%);
  --tone-page-40: rgb(from var(--role-page) r g b / 40%);
  --button-primary-bg: var(--role-ink);
  --button-primary-text: var(--role-page);
  --button-primary-border: var(--role-ink);
  --button-primary-bg-hover: var(--role-ink-2);
  --button-secondary-bg: var(--role-page);
  --button-secondary-text: var(--role-ink);
  --button-secondary-border: var(--role-line);
  --button-secondary-border-hover: var(--role-line-dark);
}

/* 4d. Light cards inside a dark panel (.theme-light): the page roles again */
.theme-light {
  --role-page: var(--role-page-root);
  --role-ink: var(--role-ink-root);
  --role-surface: var(--role-surface-root);
  --role-surface-2: var(--role-surface-2-root);
  --role-line: var(--role-line-root);
  --role-line-strong: var(--role-line-strong-root);
  --role-line-dark: var(--role-line-dark-root);
  --role-ink-soft: var(--role-ink-soft-root);
  --role-ink-muted: var(--role-ink-muted-root);
  --role-ink-2: var(--role-ink-2-root);
  --role-ink-faint: var(--role-ink-faint-root);
  --role-inverse: var(--role-inverse-root);
  --role-accent: var(--role-accent-root);
  --role-accent-deep: var(--role-accent-deep-root);
  --role-accent-soft: var(--role-accent-soft-root);
  --role-accent-muted: var(--role-accent-muted-root);
  --role-error: var(--role-error-root);
  --tone-inverse-10-figma-blue-77-figma-purple: color-mix(in srgb, color-mix(in srgb, var(--role-inverse) 10%, var(--color-figma-blue)) 77%, var(--color-figma-purple));
  --tone-page-64-on-band: color-mix(in srgb, var(--role-page) 64%, var(--role-on-band));
  --tone-jet-86-5-page: color-mix(in srgb, var(--color-jet) 86.5%, var(--role-page));
  --tone-jet-80-page: color-mix(in srgb, var(--color-jet) 80%, var(--role-page));
  --tone-on-band-79-ink-2: color-mix(in srgb, var(--role-on-band) 79%, var(--role-ink-2));
  --tone-on-band-60-3-ink: color-mix(in srgb, var(--role-on-band) 60.3%, var(--role-ink));
  --tone-ink-42-figma-blue-16-ink-soft: color-mix(in srgb, color-mix(in srgb, var(--role-ink) 42%, var(--color-figma-blue)) 16%, var(--role-ink-soft));
  --tone-page-a191: rgb(from var(--role-page) r g b / calc(191 / 255));
  --tone-page-a235: rgb(from var(--role-page) r g b / calc(235 / 255));
  --tone-page-a219: rgb(from var(--role-page) r g b / calc(219 / 255));
  --tone-page-a184: rgb(from var(--role-page) r g b / calc(184 / 255));
  --tone-page-a209: rgb(from var(--role-page) r g b / calc(209 / 255));
  --tone-page-a189: rgb(from var(--role-page) r g b / calc(189 / 255));
  --tone-ink-92: color-mix(in srgb, var(--role-ink) 92%, transparent);
  --tone-ink-95-figma-blue-33-surface: color-mix(in srgb, color-mix(in srgb, var(--role-ink) 95%, var(--color-figma-blue)) 33%, var(--role-surface));
  --tone-page-75-night-error: color-mix(in srgb, var(--role-page) 75%, var(--color-night-error));
  --tone-on-band-80-line: color-mix(in srgb, var(--role-on-band) 80%, var(--role-line));
  --tone-on-band-51-surface: color-mix(in srgb, var(--role-on-band) 51%, var(--role-surface));
  --tone-ink-49-accent-soft-91-figma-blue: color-mix(in srgb, color-mix(in srgb, var(--role-ink) 49%, var(--role-accent-soft)) 91%, var(--color-figma-blue));
  --tone-jet-86-5-page-40: rgb(from color-mix(in srgb, var(--color-jet) 86.5%, var(--role-page)) r g b / 40%);
  --tone-page-40: rgb(from var(--role-page) r g b / 40%);
  --button-primary-bg: var(--role-ink);
  --button-primary-text: var(--role-page);
  --button-primary-border: var(--role-ink);
  --button-primary-bg-hover: var(--role-ink-2);
  --button-secondary-bg: var(--role-page);
  --button-secondary-text: var(--role-ink);
  --button-secondary-border: var(--role-line);
  --button-secondary-border-hover: var(--role-line-dark);
}

/* 5. Fonts */
:root {
  --font-heading: Geist, sans-serif;
  --font-body: Geist, sans-serif;
  --font-label: "Geist 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: 5rem;
  --size-h2: 3.5rem;
  --size-h3: 1.625rem;
  --size-h4: 1.375rem;
  --size-h5: 1.125rem;
  --size-h6: 1rem;
  --size-display: 6.5rem;
  --size-number: 4rem;
  --size-body-medium: 1rem;
  --size-fixed-44-8: 2.8rem;
  --size-fixed-13: .8125rem;
  --size-body-large: 1.125rem;
  --size-body-tiny: .75rem;
  --size-fixed-20: 1.25rem;
  --size-fixed-10: .625rem;
  --size-body-small: .875rem;
  --size-fixed-18: 1.125rem;
  --size-fixed-40: 2.5rem;
  --size-fixed-72: 4.5rem;
  --size-fixed-64: 4rem;
  --size-fixed-52: 3.25rem;
  --size-fixed-60: 3.75rem;
  --size-fixed-46: 2.875rem;
  --size-fixed-44: 2.75rem;
  --size-input: .875rem;
  --size-fixed-11: .6875rem;
  --size-fixed-15: .9375rem;
  --size-fixed-88: 5.5rem;
  --size-fixed-17: 1.0625rem;
  --size-fixed-34: 2.125rem;
  --size-fixed-30: 1.875rem;
  --size-mono-small: .75rem;
  --size-tag-label: .875rem;
  --size-body-compact: .875rem;
  --size-fixed-26: 1.625rem;
  --size-parent: 1em;
  --size-fixed-36: 2.25rem;
  --size-fixed-32: 2rem;
  --size-fixed-28: 1.75rem;
  --size-fixed-24: 1.5rem;
  --size-fixed-48: 3rem;
  --size-fixed-22: 1.375rem;
  --size-fixed-19: 1.1875rem;
  --size-lead: 1.125rem;
  --size-fixed-9: .5625rem;
  --size-card-title: 1.125rem;
  --size-feature-title: 1.625rem;
  --size-stat-label: .875rem;
  --size-micro-label: .75rem;
  --size-statement: 3rem;
  --size-fixed-112: 7rem;
  --size-fixed-56: 3.5rem;
  --size-hero: 4.5rem;
  --size-fixed-80: 5rem;
  --size-page-title: 4.5rem;
  --size-section-title: 2.5rem;
  --size-fixed-104: 6.5rem;
  --size-badge: .75rem;
  --size-button-normal: .875rem;
  --size-button-small: .875rem;
  --size-14: 14px;
  --size-35vw: 35vw;
  --size-508: 508px;
  --size-38vw: 38vw;
  --size-2-5rem: 2.5rem;
  --size-wordmark-fluid: min(35vw, 508px);
  --leading-body-medium: 155%;
  --leading-h1: 100%;
  --leading-h2: 105%;
  --leading-h3: 120%;
  --leading-h4: 125%;
  --leading-h5: 130%;
  --leading-h6: 135%;
  --leading-ratio-1-75: 1.75;
  --leading-body-large: 155%;
  --leading-body-tiny: 155%;
  --leading-badge: 130%;
  --leading-ratio-1-2: 1.2;
  --leading-ratio-1-55: 1.55;
  --leading-ratio-1-6: 1.6;
  --leading-ratio-1: 1;
  --leading-ratio-1-04: 1.04;
  --leading-ratio-1-05: 1.05;
  --leading-percent-150: 150%;
  --leading-button-small: 155%;
  --leading-body-small: 155%;
  --leading-ratio-1-4: 1.4;
  --leading-ratio-1-3: 1.3;
  --leading-ratio-0-8: .8;
  --leading-ratio-1-5: 1.5;
  --leading-ratio-1-12: 1.12;
  --leading-display: 95%;
  --leading-ratio-1-35: 1.35;
  --leading-ratio-1-1: 1.1;
  --leading-fixed-16: 16px;
  --leading-fixed-24: 24px;
  --leading-ratio-1-25: 1.25;
  --leading-fixed-22: 22px;
  --leading-ratio-1-7: 1.7;
  --leading-ratio-1-15: 1.15;
  --leading-button-normal: 155%;
  --leading-100: 1;
  --tracking-tight-1: -.01em;
  --tracking-tight-0-5: -.005em;
  --tracking-tight-2: -.02em;
  --tracking-tight-1-5: -.015em;
  --tracking-none: 0em;
  --tracking-wide-8: .08em;
  --tracking-wide-6: .06em;
  --tracking-wide-4: .04em;
  --tracking-wide-2: .02em;
  --tracking-tight-3-5: -.035em;
  --tracking-tight-3: -.03em;
  --tracking-tight-4: -.04em;
  --tracking-tight-6: -.06em;
  --tracking-tight-0-27-px: -.27px;
  --tracking-tight-0-24-px: -.24px;
  --tracking-tight-0-21-px: -.21px;
  --tracking-wide-0-2-px: .2px;
  --tracking-tight-0-64-px: -.64px;
  --tracking-wide-0-22-px: .22px;
  --tracking-tight-0-85-px: -.85px;
  --tracking-tight-0-5-px: -.5px;
  --tracking-tight-1-px: -1px;
  --tracking-tight-2-px: -2px;
  --tracking-tight-0-33-px: -.33px;
  --tracking-wide-0-4-px: .4px;
  --tracking-tight-1-92-px: -1.92px;
  --tracking-tight-2-5: -.025em;
  --tracking-tight-2-52-px: -2.52px;
  --tracking-tight-1-4-px: -1.4px;
}

/* 7. Spacing: 4px base. Values off the 4px grid keep their own token; rem values keep rem. */
:root {
  --container-width: 1380px;
  --section-spacing: 1;
  --section-padding-large: 112px;
  --section-padding-medium: 96px;
  --section-padding-small: 48px;
  --spacing-1: 1px;
  --spacing-2: 2px;
  --spacing-3: 3px;
  --spacing-4: 4px;
  --spacing-5: 5px;
  --spacing-6: 6px;
  --spacing-7: 7px;
  --spacing-8: 8px;
  --spacing-9: 9px;
  --spacing-10: 10px;
  --spacing-11: 11px;
  --spacing-12: 12px;
  --spacing-14: 14px;
  --spacing-15: 15px;
  --spacing-16: 16px;
  --spacing-18: 18px;
  --spacing-20: 20px;
  --spacing-21: 21px;
  --spacing-22: 22px;
  --spacing-24: 24px;
  --spacing-26: 26px;
  --spacing-27: 27px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-34: 34px;
  --spacing-36: 36px;
  --spacing-39: 39px;
  --spacing-40: 40px;
  --spacing-42: 42px;
  --spacing-44: 44px;
  --spacing-48: 48px;
  --spacing-50: 50px;
  --spacing-52: 52px;
  --spacing-56: 56px;
  --spacing-60: 60px;
  --spacing-64: 64px;
  --spacing-66: 66px;
  --spacing-70: 70px;
  --spacing-72: 72px;
  --spacing-78: 78px;
  --spacing-80: 80px;
  --spacing-82: 82px;
  --spacing-88: 88px;
  --spacing-96: 96px;
  --spacing-98: 98px;
  --spacing-104: 104px;
  --spacing-112: 112px;
  --spacing-116: 116px;
  --spacing-120: 120px;
  --spacing-140: 140px;
  --spacing-150: 150px;
  --spacing-160: 160px;
  --spacing-166: 166px;
  --spacing-180: 180px;
  --spacing-190: 190px;
  --spacing-200: 200px;
  --spacing-220: 220px;
  --spacing-256: 256px;
  --spacing-1rem: 1rem;
  --spacing-1-5rem: 1.5rem;
  --spacing-1-25rem: 1.25rem;
  --spacing-0-5rem: .5rem;
  --spacing-2rem: 2rem;
  --spacing-0-07em: .07em;
  --spacing-0-05em: .05em;
}

/* 7b. Breakpoint values for the role sizes, section paddings and other responsive tokens */
@media screen and (max-width: 991px) {
  :root {
    --size-h1: 4rem;
    --size-h2: 2.75rem;
    --size-h3: 1.5rem;
    --size-display: 4.5rem;
    --size-number: 3.25rem;
    --size-statement: 2.5rem;
    --size-hero: 3.75rem;
    --size-page-title: 4rem;
    --size-section-title: 2.125rem;
    --section-padding-large: 96px;
    --section-padding-medium: 84px;
    --section-padding-small: 44px;
  }
}
@media screen and (max-width: 767px) {
  :root {
    --size-h1: 3.25rem;
    --size-h2: 2.25rem;
    --size-h3: 1.375rem;
    --size-h4: 1.25rem;
    --size-h5: 1.0625rem;
    --size-display: 3.5rem;
    --size-number: 2.75rem;
    --size-body-large: 1.0625rem;
    --size-input: 1rem;
    --size-lead: 1rem;
    --size-feature-title: 1.375rem;
    --size-stat-label: .75rem;
    --size-statement: 2rem;
    --size-hero: 2.875rem;
    --size-page-title: 3.25rem;
    --size-section-title: 1.875rem;
    --section-padding-large: 80px;
    --section-padding-medium: 72px;
    --section-padding-small: 40px;
  }
}
@media screen and (max-width: 479px) {
  :root {
    --size-h1: 2.75rem;
    --size-h2: 2.125rem;
    --size-h3: 1.375rem;
    --size-h4: 1.25rem;
    --size-h5: 1.0625rem;
    --size-display: 3.25rem;
    --size-number: 2.5rem;
    --size-body-large: 1.0625rem;
    --size-input: 1rem;
    --size-mono-small: .6875rem;
    --size-tag-label: .75rem;
    --size-body-compact: .8125rem;
    --size-lead: 1rem;
    --size-card-title: 1rem;
    --size-feature-title: 1.375rem;
    --size-stat-label: .75rem;
    --size-micro-label: .625rem;
    --size-statement: 1.75rem;
    --size-hero: 2.5rem;
    --size-page-title: 2.5rem;
    --size-section-title: 1.875rem;
    --section-padding-large: 72px;
    --section-padding-medium: 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: 24px;
  --radius-button: 999px;
  --radius-pill: var(--radius-button);
  --radius-1: calc(var(--radius-card) * 1 / 24);
  --radius-2: calc(var(--radius-card) * 2 / 24);
  --radius-3: calc(var(--radius-card) * 3 / 24);
  --radius-4: calc(var(--radius-card) * 4 / 24);
  --radius-5: calc(var(--radius-card) * 5 / 24);
  --radius-6: calc(var(--radius-card) * 6 / 24);
  --radius-7: calc(var(--radius-card) * 7 / 24);
  --radius-8: calc(var(--radius-card) * 8 / 24);
  --radius-10: calc(var(--radius-card) * 10 / 24);
  --radius-12: calc(var(--radius-card) * 12 / 24);
  --radius-14: calc(var(--radius-card) * 14 / 24);
  --radius-16: calc(var(--radius-card) * 16 / 24);
  --radius-18: calc(var(--radius-card) * 18 / 24);
  --radius-20: calc(var(--radius-card) * 20 / 24);
  --radius-22: calc(var(--radius-card) * 22 / 24);
  --radius-28: calc(var(--radius-card) * 28 / 24);
}

/* 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-page);
  --button-primary-border: var(--role-ink);
  --button-primary-bg-hover: var(--role-ink-2);
  --button-secondary-bg: var(--role-page);
  --button-secondary-text: var(--role-ink);
  --button-secondary-border: var(--role-line);
  --button-secondary-border-hover: var(--role-line-dark);
}

/* 10. Shadows and focus */
:root,
[data-theme] {
  --shadow-1: 0 0 3px 1px var(--role-accent);
  --shadow-2: 0 4px 16px var(--tone-shadow-a13);
  --shadow-3: 0 1px 3px var(--tone-shadow-a20);
  --shadow-4: 0 16px 40px var(--tone-shadow-a20);
  --shadow-5: 0 12px 32px var(--tone-shadow-a31);
  --shadow-6: 0 8px 24px var(--tone-shadow-a20);
  --shadow-7: 0 16px 40px var(--tone-shadow-a36);
  --shadow-8: 0 8px 24px var(--tone-shadow-a15);
  --shadow-9: 0 2px 6px var(--tone-shadow-a15), 0 16px 40px var(--tone-shadow-a26);
  --shadow-10: 0 12px 32px var(--tone-shadow-a20);
  --shadow-11: 0 20px 40px var(--tone-shadow-40);
  --shadow-12: 0 20px 40px var(--tone-shadow-a41);
  --shadow-13: 0 24px 60px -24px var(--tone-shadow-a61);
  --focus-ring: var(--role-accent);
}

/* 11. Motion */
:root {
  --motion-fast: .2s;
  --motion-0-15s: .15s;
  --motion-base: .3s;
  --motion-slow: .6s;
  --ease-1: cubic-bezier(.215, .61, .355, 1);
  --ease-2: 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 */