/* Canopis design system: theme.css (palette, roles, themes and every token).
   Generated by _tools/design-system/generate.mjs from _tools/design-system/maps/canopis.mjs (with canopis.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-linen: #f7f6f2;
  --color-chalk: #f0eee8;
  --color-sand: #e9e3d2;
  --color-oat-line: #e2e0d6;
  --color-dry-grass: #d3d2c6;
  --color-stubble: #bdbdb0;
  --color-loam: #1f2420;
  --color-moss-grey: #4c5447;
  --color-lichen: #565f50;
  --color-bark: #5f6357;
  --color-sage-stone: #8d8f82;
  --color-night-soil: #0a120a;
  --color-field-green: #3f6b3e;
  --color-forest: #2d4f2d;
  --color-sprout: #e5ecdc;
  --color-humus: #6b4f3a;
  --color-subsoil: #9a7a5c;
  --color-clay: #c7b091;
  --color-bedrock: #e2d4bd;
  --color-field-polygon: #547846;
  --color-shadow-moss: #141e14;
  --color-jet: #000000;
  --color-pager-ink: #333333;
  --color-pager-line: #cccccc;
  --color-pager-white: #fafafa;
  --color-error-red: #b22921;
  --color-error-ink: #7a2e1f;
  --color-error-wash: #f6e4df;
}

/* 2. Colour roles: Original */
:root {
  --role-ink: var(--color-loam);
  --role-page: var(--color-white);
  --role-surface: var(--color-linen);
  --role-accent: var(--color-field-green);
  --role-accent-deep: var(--color-forest);
  --role-line: var(--color-oat-line);
  --role-on-photo: var(--color-white);
  --role-overlay: var(--color-night-soil);
  --role-surface-2: var(--color-chalk);
  --role-sand: var(--color-sand);
  --role-accent-soft: var(--color-sprout);
  --role-line-strong: var(--color-dry-grass);
  --role-line-dark: var(--color-stubble);
  --role-ink-2: var(--color-moss-grey);
  --role-ink-soft: var(--color-lichen);
  --role-ink-muted: var(--color-bark);
  --role-ink-faint: var(--color-sage-stone);
  --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-loam);
  --role-page: var(--color-white);
  --role-surface: var(--color-linen);
  --role-accent: var(--color-field-green);
  --role-accent-deep: var(--color-forest);
  --role-line: var(--color-oat-line);
  --role-on-photo: var(--color-white);
  --role-overlay: var(--color-night-soil);
  --role-surface-2: var(--color-chalk);
  --role-sand: var(--color-sand);
  --role-accent-soft: var(--color-sprout);
  --role-line-strong: var(--color-dry-grass);
  --role-line-dark: var(--color-stubble);
  --role-ink-2: var(--color-moss-grey);
  --role-ink-soft: var(--color-lichen);
  --role-ink-muted: var(--color-bark);
  --role-ink-faint: var(--color-sage-stone);
  --role-error: var(--color-error-red);
}
[data-theme="spring-sowing"] {
  color-scheme: light;
  --role-ink: #18241c;
  --role-page: #fbfdf8;
  --role-surface: #f1f6ec;
  --role-accent: #3a7533;
  --role-accent-deep: #1f4a2a;
  --role-line: #dde8d6;
  --role-on-photo: #ffffff;
  --role-overlay: #0a120a;
  --role-surface-2: #e8f0e2;
  --role-sand: #e4eed6;
  --role-accent-soft: #dcefd2;
  --role-line-strong: #cbd9c2;
  --role-line-dark: #b1c2a6;
  --role-ink-2: #3f5243;
  --role-ink-soft: #4a5d4c;
  --role-ink-muted: #536355;
  --role-ink-faint: #7f8f80;
  --role-error: #b22921;
}
[data-theme="harvest-gold"] {
  color-scheme: light;
  --role-ink: #2a2114;
  --role-page: #fffcf5;
  --role-surface: #f8f1e2;
  --role-accent: #85601a;
  --role-accent-deep: #4a3c1c;
  --role-line: #ebe1cb;
  --role-on-photo: #ffffff;
  --role-overlay: #140f06;
  --role-surface-2: #f2e8d3;
  --role-sand: #efe0bd;
  --role-accent-soft: #f4e6c4;
  --role-line-strong: #ddd0b4;
  --role-line-dark: #c6b694;
  --role-ink-2: #4f4430;
  --role-ink-soft: #5b4f39;
  --role-ink-muted: #635742;
  --role-ink-faint: #938670;
  --role-error: #b22921;
}
[data-theme="winter-fallow"] {
  color-scheme: light;
  --role-ink: #1b2228;
  --role-page: #fbfcfd;
  --role-surface: #f1f4f6;
  --role-accent: #2f5d4e;
  --role-accent-deep: #24343f;
  --role-line: #dfe5ea;
  --role-on-photo: #ffffff;
  --role-overlay: #0a1014;
  --role-surface-2: #e8edf1;
  --role-sand: #e6e9e4;
  --role-accent-soft: #dfeae5;
  --role-line-strong: #cdd5dc;
  --role-line-dark: #b3bec7;
  --role-ink-2: #3d4851;
  --role-ink-soft: #48535c;
  --role-ink-muted: #505b64;
  --role-ink-faint: #808b94;
  --role-error: #b22921;
}
[data-theme="peat-night"] {
  color-scheme: dark;
  --role-ink: #efe9da;
  --role-page: #14140f;
  --role-surface: #1c1d17;
  --role-accent: #a9c08f;
  --role-accent-deep: #c9d8b4;
  --role-line: #2e3027;
  --role-on-photo: #ffffff;
  --role-overlay: #0a120a;
  --role-surface-2: #22231c;
  --role-sand: #2a2920;
  --role-accent-soft: #26301f;
  --role-line-strong: #393b31;
  --role-line-dark: #4c4e43;
  --role-ink-2: #d6d0c0;
  --role-ink-soft: #c2bcab;
  --role-ink-muted: #b4ae9e;
  --role-ink-faint: #8a8577;
  --role-error: #ff8a7a;
}
[data-theme="inverted"] {
  color-scheme: dark;
  --role-ink: #ffffff;
  --role-page: #10140f;
  --role-surface: #171c16;
  --role-accent: #b8d4a4;
  --role-accent-deep: #e5ecdc;
  --role-line: #283026;
  --role-on-photo: #ffffff;
  --role-overlay: #0a120a;
  --role-surface-2: #1d231b;
  --role-sand: #24261c;
  --role-accent-soft: #1f2c1d;
  --role-line-strong: #343d31;
  --role-line-dark: #4a5345;
  --role-ink-2: #dfe3da;
  --role-ink-soft: #c9cfc3;
  --role-ink-muted: #bcc2b5;
  --role-ink-faint: #8c9286;
  --role-error: #ff8a7a;
}

/* 4. Derived colours: worked out from roles with color-mix, never stored */
:root,
[data-theme] {
  --tone-page-16: rgb(from var(--role-page) r g b / 16%);
  --tone-accent-deep-90-3-pager-line: color-mix(in srgb, var(--role-accent-deep) 90.3%, var(--color-pager-line));
  --tone-pager-line-62-pager-white: color-mix(in srgb, var(--color-pager-line) 62%, var(--color-pager-white));
  --tone-page-a230: rgb(from var(--role-page) r g b / calc(230 / 255));
  --tone-jet-12: rgb(from var(--color-jet) r g b / 12%);
  --tone-pager-ink-66-jet: color-mix(in srgb, var(--color-pager-ink) 66%, var(--color-jet));
  --tone-pager-line-97-1-pager-ink: color-mix(in srgb, var(--color-pager-line) 97.1%, var(--color-pager-ink));
  --tone-page-a36: rgb(from var(--role-page) r g b / calc(36 / 255));
  --tone-page-a31: rgb(from var(--role-page) r g b / calc(31 / 255));
  --tone-page-60: rgb(from var(--role-page) r g b / 60%);
  --tone-page-20: rgb(from var(--role-page) r g b / 20%);
  --tone-page-a46: rgb(from var(--role-page) r g b / calc(46 / 255));
  --tone-overlay-a191: rgb(from var(--role-overlay) r g b / calc(191 / 255));
  --tone-overlay-a89: rgb(from var(--role-overlay) r g b / calc(89 / 255));
  --tone-page-a89: rgb(from var(--role-page) r g b / calc(89 / 255));
  --tone-page-a240: rgb(from var(--role-page) r g b / calc(240 / 255));
  --tone-field-polygon-a89: rgb(from var(--color-field-polygon) r g b / calc(89 / 255));
  --tone-pager-line-66-4-pager-ink: color-mix(in srgb, var(--color-pager-line) 66.4%, var(--color-pager-ink));
  --tone-jet-40: rgb(from var(--color-jet) r g b / 40%);
  --tone-pager-white-93-pager-line: color-mix(in srgb, var(--color-pager-white) 93%, var(--color-pager-line));
  --tone-page-a224: rgb(from var(--role-page) r g b / calc(224 / 255));
  --tone-ink-a15: rgb(from var(--role-ink) r g b / calc(15 / 255));
  --tone-page-40: rgb(from var(--role-page) r g b / 40%);
  --tone-page-a66: rgb(from var(--role-page) r g b / calc(66 / 255));
  --tone-page-a20: rgb(from var(--role-page) r g b / calc(20 / 255));
  --tone-overlay-60: rgb(from var(--role-overlay) r g b / 60%);
  --tone-overlay-a128: rgb(from var(--role-overlay) r g b / calc(128 / 255));
  --tone-overlay-20: rgb(from var(--role-overlay) r g b / 20%);
  --tone-page-a41: rgb(from var(--role-page) r g b / calc(41 / 255));
  --tone-page-a71: rgb(from var(--role-page) r g b / calc(71 / 255));
  --tone-page-a140: rgb(from var(--role-page) r g b / calc(140 / 255));
  --tone-page-a15: rgb(from var(--role-page) r g b / calc(15 / 255));
  --tone-jet-60: rgb(from var(--color-jet) r g b / 60%);
  --tone-pager-white-82-pager-line: color-mix(in srgb, var(--color-pager-white) 82%, var(--color-pager-line));
  --tone-page-a235: rgb(from var(--role-page) r g b / calc(235 / 255));
  --tone-ink-69-accent-68-sand: color-mix(in srgb, color-mix(in srgb, var(--role-ink) 69%, var(--role-accent)) 68%, var(--role-sand));
  --tone-ink-faint-64-ink-2: color-mix(in srgb, var(--role-ink-faint) 64%, var(--role-ink-2));
  --tone-pager-line-52-pager-white: color-mix(in srgb, var(--color-pager-line) 52%, var(--color-pager-white));
  --tone-pager-white-73-pager-line: color-mix(in srgb, var(--color-pager-white) 73%, var(--color-pager-line));
  --tone-pager-white-84-pager-line: color-mix(in srgb, var(--color-pager-white) 84%, var(--color-pager-line));
  --tone-pager-ink-66-jet-40: rgb(from color-mix(in srgb, var(--color-pager-ink) 66%, var(--color-jet)) r g b / 40%);
  --tone-jet-90: rgb(from var(--color-jet) r g b / 90%);
  --tone-ink-a61: rgb(from var(--role-ink) r g b / calc(61 / 255));
  --tone-jet-a18: rgb(from var(--color-jet) r g b / calc(18 / 255));
  --tone-jet-a8: rgb(from var(--color-jet) r g b / calc(8 / 255));
  --tone-pager-line-60-pager-white: color-mix(in srgb, var(--color-pager-line) 60%, var(--color-pager-white));
  --tone-ink-a46: rgb(from var(--role-ink) r g b / calc(46 / 255));
  --tone-ink-a31: rgb(from var(--role-ink) r g b / calc(31 / 255));
  --tone-overlay-a46: rgb(from var(--role-overlay) r g b / calc(46 / 255));
  --tone-shadow-moss-a46: rgb(from var(--color-shadow-moss) r g b / calc(46 / 255));
  --tone-ink-faint-66-line-strong: color-mix(in srgb, var(--role-ink-faint) 66%, var(--role-line-strong));
  --tone-overlay-92: color-mix(in srgb, var(--role-overlay) 92%, transparent);
}

/* 4b. Photo areas: text inside that reads the page colour reads Text on photos instead (same colour in Original) */
.cover-scrim,
.section_h1-hero,
.h1-solutions_tile,
.section_h1-sectors,
.h1-testimonials_card,
.section_h1-cta,
.section_image-hero {
  --role-page: var(--role-on-photo);
  --role-accent-soft: var(--color-sprout);
  --role-line: var(--color-oat-line);
  --role-surface-2: var(--color-chalk);
  --role-line-strong: var(--color-dry-grass);
  --role-sand: var(--color-sand);
  --role-surface: var(--color-linen);
  --role-accent-deep: var(--color-forest);
  --button-primary-text: var(--role-page-outer);
  --button-secondary-bg: var(--role-page-outer);
  --button-alternative-bg-hover: var(--role-page-outer);
  --tone-page-16: rgb(from var(--role-page) r g b / 16%);
  --tone-page-a230: rgb(from var(--role-page) r g b / calc(230 / 255));
  --tone-page-a36: rgb(from var(--role-page) r g b / calc(36 / 255));
  --tone-page-a31: rgb(from var(--role-page) r g b / calc(31 / 255));
  --tone-page-60: rgb(from var(--role-page) r g b / 60%);
  --tone-page-20: rgb(from var(--role-page) r g b / 20%);
  --tone-page-a46: rgb(from var(--role-page) r g b / calc(46 / 255));
  --tone-page-a89: rgb(from var(--role-page) r g b / calc(89 / 255));
  --tone-page-a240: rgb(from var(--role-page) r g b / calc(240 / 255));
  --tone-page-a224: rgb(from var(--role-page) r g b / calc(224 / 255));
  --tone-page-40: rgb(from var(--role-page) r g b / 40%);
  --tone-page-a66: rgb(from var(--role-page) r g b / calc(66 / 255));
  --tone-page-a20: rgb(from var(--role-page) r g b / calc(20 / 255));
  --tone-page-a41: rgb(from var(--role-page) r g b / calc(41 / 255));
  --tone-page-a71: rgb(from var(--role-page) r g b / calc(71 / 255));
  --tone-page-a140: rgb(from var(--role-page) r g b / calc(140 / 255));
  --tone-page-a15: rgb(from var(--role-page) r g b / calc(15 / 255));
  --tone-page-a235: rgb(from var(--role-page) r g b / calc(235 / 255));
  --tone-accent-deep-90-3-pager-line: color-mix(in srgb, var(--role-accent-deep) 90.3%, var(--color-pager-line));
  --tone-ink-69-accent-68-sand: color-mix(in srgb, color-mix(in srgb, var(--role-ink) 69%, var(--role-accent)) 68%, var(--role-sand));
  --tone-ink-faint-66-line-strong: color-mix(in srgb, var(--role-ink-faint) 66%, var(--role-line-strong));
}
:root,
[data-theme] {
  --role-page-outer: var(--role-page);
}
.cover-scrim :is(input, select, textarea),
.section_h1-hero :is(input, select, textarea),
.h1-solutions_tile :is(input, select, textarea),
.section_h1-sectors :is(input, select, textarea),
.h1-testimonials_card :is(input, select, textarea),
.section_h1-cta :is(input, select, textarea),
.section_image-hero :is(input, select, textarea) {
  --role-page: var(--role-page-outer);
}

/* 4d. Light chips on the hero photo: dark text in every theme */
.h1-hero_stat,
.h1-solutions_pill {
  --role-ink: var(--color-loam);
  --role-accent: var(--color-field-green);
  --role-accent-deep: var(--color-forest);
  --role-ink-2: var(--color-moss-grey);
  --role-ink-soft: var(--color-lichen);
  --role-ink-muted: var(--color-bark);
  --role-ink-faint: var(--color-sage-stone);
  --tone-accent-deep-90-3-pager-line: color-mix(in srgb, var(--role-accent-deep) 90.3%, var(--color-pager-line));
  --tone-ink-a15: rgb(from var(--role-ink) r g b / calc(15 / 255));
  --tone-ink-69-accent-68-sand: color-mix(in srgb, color-mix(in srgb, var(--role-ink) 69%, var(--role-accent)) 68%, var(--role-sand));
  --tone-ink-faint-64-ink-2: color-mix(in srgb, var(--role-ink-faint) 64%, var(--role-ink-2));
  --tone-ink-a61: rgb(from var(--role-ink) r g b / calc(61 / 255));
  --tone-ink-a46: rgb(from var(--role-ink) r g b / calc(46 / 255));
  --tone-ink-a31: rgb(from var(--role-ink) r g b / calc(31 / 255));
  --tone-ink-faint-66-line-strong: color-mix(in srgb, var(--role-ink-faint) 66%, var(--role-line-strong));
  --button-primary-bg: var(--role-accent);
  --button-primary-bg-hover: var(--role-accent-deep);
  --button-secondary-text: var(--role-ink);
  --button-alternative-text: var(--role-accent-deep);
}
:where(.h1-hero_stat, .h1-solutions_pill) {
  color: var(--role-ink);
}

/* 5. Fonts */
:root {
  --font-heading: Lora, sans-serif;
  --font-body: Manrope, sans-serif;
  --font-label: Manrope, 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: 2.25rem;
  --size-h4: 1.75rem;
  --size-h5: 1.375rem;
  --size-h6: 1.125rem;
  --size-display: 5.5rem;
  --size-body-medium: 1rem;
  --size-body-large: 1.125rem;
  --size-body-small: .875rem;
  --size-body-tiny: .75rem;
  --size-badge: .75rem;
  --size-button-normal: .875rem;
  --size-button-small: .8125rem;
  --size-14: 14px;
  --size-12: 12px;
  --size-16: 16px;
  --size-18: 18px;
  --size-13: 13px;
  --size-15: 15px;
  --size-36: 36px;
  --size-64: 64px;
  --size-22: 22px;
  --size-28: 28px;
  --size-20: 20px;
  --size-44: 44px;
  --size-56: 56px;
  --size-88: 88px;
  --size-11: 11px;
  --size-30: 30px;
  --size-24: 24px;
  --size-26: 26px;
  --size-40: 40px;
  --size-48: 48px;
  --size-38: 38px;
  --size-42: 42px;
  --size-0-875rem: .875rem;
  --size-17: 17px;
  --size-32: 32px;
  --size-2-5rem: 2.5rem;
  --size-34: 34px;
  --size-84: 84px;
  --size-21: 21px;
  --size-80: 80px;
  --size-72: 72px;
  --size-168: 168px;
  --size-52: 52px;
  --size-60: 60px;
  --size-104: 104px;
  --size-2-8rem: 2.8rem;
  --leading-body-medium: 150%;
  --leading-h1: 100%;
  --leading-h2: 104%;
  --leading-h3: 110%;
  --leading-h4: 115%;
  --leading-h5: 125%;
  --leading-h6: 130%;
  --leading-body-large: 150%;
  --leading-badge: 140%;
  --leading-button-normal: 150%;
  --leading-body-small: 145%;
  --leading-body-tiny: 140%;
  --leading-button-small: 150%;
  --leading-display: 96%;
  --leading-130: 1.3;
  --leading-150: 1.5;
  --leading-140: 1.4;
  --leading-120: 1.2;
  --leading-100: 1;
  --leading-110: 1.1;
  --leading-145: 1.45;
  --leading-115: 1.15;
  --leading-102: 1.02;
  --leading-105: 1.05;
  --leading-125: 1.25;
  --leading-160: 1.6;
  --leading-108: 1.08;
  --leading-165: 1.65;
  --leading-095: .95;
  --leading-135: 1.35;
  --tracking-n0-01em: -.01em;
  --tracking-n0-02em: -.02em;
  --tracking-0-06em: .06em;
  --tracking-0-04em: .04em;
  --tracking-n0-015em: -.015em;
  --tracking-0-08em: .08em;
  --tracking-n0-005em: -.005em;
  --tracking-0-12em: .12em;
  --tracking-0-14em: .14em;
  --tracking-n0-04em: -.04em;
  --tracking-0-6: .6px;
}

/* 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-medium: 96px;
  --section-padding-small: 48px;
  --section-padding-large: 112px;
  --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-12: 12px;
  --spacing-14: 14px;
  --spacing-16: 16px;
  --spacing-18: 18px;
  --spacing-20: 20px;
  --spacing-22: 22px;
  --spacing-24: 24px;
  --spacing-26: 26px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-36: 36px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-60: 60px;
  --spacing-64: 64px;
  --spacing-72: 72px;
  --spacing-80: 80px;
  --spacing-96: 96px;
  --spacing-112: 112px;
  --spacing-120: 120px;
  --spacing-128: 128px;
  --spacing-130: 130px;
  --spacing-140: 140px;
  --spacing-150: 150px;
  --spacing-160: 160px;
  --spacing-180: 180px;
  --spacing-200: 200px;
  --spacing-1rem: 1rem;
  --spacing-1-5rem: 1.5rem;
  --spacing-0-75rem: .75rem;
  --spacing-0-375rem: .375rem;
  --spacing-0-5rem: .5rem;
  --spacing-2rem: 2rem;
  --spacing-3rem: 3rem;
  --spacing-6rem: 6rem;
  --spacing-1-25rem: 1.25rem;
  --spacing-2-5rem: 2.5rem;
  --spacing-0-5625rem: .5625rem;
  --spacing-0-25rem: .25rem;
  --spacing-0-6rem: .6rem;
}

/* 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: 2rem;
    --size-display: 4.5rem;
    --section-padding-medium: 84px;
    --section-padding-small: 44px;
    --section-padding-large: 96px;
  }
}
@media screen and (max-width: 767px) {
  :root {
    --size-h1: 2.5rem;
    --size-h2: 2rem;
    --size-h3: 1.625rem;
    --size-h4: 1.375rem;
    --size-h5: 1.125rem;
    --size-h6: 1rem;
    --size-display: 3.25rem;
    --size-body-large: 1.0625rem;
    --section-padding-medium: 72px;
    --section-padding-small: 40px;
    --section-padding-large: 80px;
  }
}
@media screen and (max-width: 479px) {
  :root {
    --size-h1: 2.25rem;
    --size-h2: 1.875rem;
    --size-h3: 1.625rem;
    --size-h4: 1.375rem;
    --size-h5: 1.125rem;
    --size-h6: 1rem;
    --size-display: 2.75rem;
    --size-body-large: 1.0625rem;
    --section-padding-medium: 72px;
    --section-padding-small: 40px;
    --section-padding-large: 72px;
  }
}

/* 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: 20px;
  --radius-button: 999px;
  --radius-pill: var(--radius-button);
  --radius-2: calc(var(--radius-card) * 2 / 20);
  --radius-3: calc(var(--radius-card) * 3 / 20);
  --radius-6: calc(var(--radius-card) * 6 / 20);
  --radius-8: calc(var(--radius-card) * 8 / 20);
  --radius-10: calc(var(--radius-card) * 10 / 20);
  --radius-12: calc(var(--radius-card) * 12 / 20);
  --radius-14: calc(var(--radius-card) * 14 / 20);
  --radius-16: calc(var(--radius-card) * 16 / 20);
  --radius-18: calc(var(--radius-card) * 18 / 20);
  --radius-24: calc(var(--radius-card) * 24 / 20);
  --radius-50: calc(var(--radius-card) * 50 / 20);
  --radius-60: calc(var(--radius-card) * 60 / 20);
  --radius-99: calc(var(--radius-card) * 99 / 20);
  --radius-100: calc(var(--radius-card) * 100 / 20);
  --radius-0-75rem: calc(var(--radius-card) * 12 / 20);
  --radius-0-375rem: calc(var(--radius-card) * 6 / 20);
}

/* 9. Buttons: read-only, they follow the roles and --radius-button */
:root,
[data-theme] {
  --button-primary-bg: var(--role-accent);
  --button-primary-text: var(--role-page);
  --button-primary-bg-hover: var(--role-accent-deep);
  --button-secondary-bg: var(--role-page);
  --button-secondary-text: var(--role-ink);
  --button-secondary-border: var(--role-line-strong);
  --button-secondary-bg-hover: var(--role-surface);
  --button-alternative-bg: var(--role-accent-soft);
  --button-alternative-text: var(--role-accent-deep);
  --button-alternative-bg-hover: var(--role-page);
}

/* 10. Shadows and focus */
:root,
[data-theme] {
  --shadow-1: 0 24px 60px -24px var(--tone-ink-a61);
  --shadow-2: 0 6px 1.25rem var(--tone-jet-a8);
  --shadow-3: 0 2px 0 0 var(--color--neutral--shade-50), 0 -2px 0 0 var(--tone-pager-line-60-pager-white);
  --shadow-4: 0 12px 40px -16px var(--tone-ink-a46);
  --shadow-5: 0 16px 36px var(--tone-jet-a18), 0 40px 40px var(--tone-jet-a8);
  --shadow-6: 0 2px 8px var(--tone-ink-a31);
  --shadow-7: 0 6px 20px var(--tone-overlay-a46);
  --shadow-8: 0 16px 36px var(--tone-jet-a18);
  --shadow-9: 0 18px 40px var(--tone-shadow-moss-a46);
  --focus-ring: var(--role-accent);
}

/* 11. Motion */
:root {
  --motion-fast: .2s;
  --motion-slow: .6s;
  --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 */