/* Oriel design system: theme.css (palette, roles, themes and every token).
   Generated by _tools/design-system/generate.mjs from _tools/design-system/maps/oriel.mjs (with oriel.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: #f4f5f2;
  --color-mist: #eceeea;
  --color-sage-line: #e3e6e2;
  --color-fern-line: #d8ddd8;
  --color-seafoam: #dce6e3;
  --color-forest-ink: #151917;
  --color-moss: #68716c;
  --color-charcoal: #292929;
  --color-menu-black: #000000;
  --color-jet: #000000;
  --color-sage: #4f6f6a;
  --color-pine-deep: #2f4744;
  --color-alert-red: #b22921;
  --color-alert-wash: #f7e6e4;
  --color-check-navy: #000d14;
}

/* 2. Colour roles: Original */
:root {
  --role-ink: var(--color-forest-ink);
  --role-page: var(--color-white);
  --role-surface: var(--color-linen);
  --role-accent: var(--color-sage);
  --role-accent-deep: var(--color-pine-deep);
  --role-line: var(--color-sage-line);
  --role-on-photo: var(--color-white);
  --role-overlay: var(--color-forest-ink);
  --role-surface-2: var(--color-mist);
  --role-line-strong: var(--color-fern-line);
  --role-accent-soft: var(--color-seafoam);
  --role-ink-soft: var(--color-moss);
  --role-ink-nav: var(--color-charcoal);
  --role-ink-black: var(--color-menu-black);
  --role-ink-deep: var(--color-pine-deep);
  --role-on-accent: var(--color-white);
  --role-on-deep: var(--color-white);
  --role-on-deep-soft: var(--color-seafoam);
}

/* 3. Themes: each sets every role. Photo overlay stays dark in every theme. */
[data-theme="original"] {
  --role-ink: var(--color-forest-ink);
  --role-page: var(--color-white);
  --role-surface: var(--color-linen);
  --role-accent: var(--color-sage);
  --role-accent-deep: var(--color-pine-deep);
  --role-line: var(--color-sage-line);
  --role-on-photo: var(--color-white);
  --role-overlay: var(--color-forest-ink);
  --role-surface-2: var(--color-mist);
  --role-line-strong: var(--color-fern-line);
  --role-accent-soft: var(--color-seafoam);
  --role-ink-soft: var(--color-moss);
  --role-ink-nav: var(--color-charcoal);
  --role-ink-black: var(--color-menu-black);
  --role-ink-deep: var(--color-pine-deep);
  --role-on-accent: var(--color-white);
  --role-on-deep: var(--color-white);
  --role-on-deep-soft: var(--color-seafoam);
}
[data-theme="harbour-clinic"] {
  color-scheme: light;
  --role-ink: #121822;
  --role-page: #ffffff;
  --role-surface: #f2f5f8;
  --role-accent: #3d6585;
  --role-accent-deep: #203a52;
  --role-line: #e1e7ed;
  --role-on-photo: #ffffff;
  --role-overlay: #121822;
  --role-surface-2: #e9eef3;
  --role-line-strong: #d5dde5;
  --role-accent-soft: #dbe6f0;
  --role-ink-soft: #626e7a;
  --role-ink-nav: #232a33;
  --role-ink-black: #0b1018;
  --role-ink-deep: #203a52;
  --role-on-accent: #ffffff;
  --role-on-deep: #ffffff;
  --role-on-deep-soft: #dbe6f0;
}
[data-theme="rose-clinic"] {
  color-scheme: light;
  --role-ink: #1f1517;
  --role-page: #ffffff;
  --role-surface: #f8f3f3;
  --role-accent: #8a5560;
  --role-accent-deep: #4f2a33;
  --role-line: #ece2e3;
  --role-on-photo: #ffffff;
  --role-overlay: #1f1517;
  --role-surface-2: #f2eaeb;
  --role-line-strong: #e2d5d7;
  --role-accent-soft: #f0dfe2;
  --role-ink-soft: #76676a;
  --role-ink-nav: #2e2426;
  --role-ink-black: #140b0d;
  --role-ink-deep: #4f2a33;
  --role-on-accent: #ffffff;
  --role-on-deep: #ffffff;
  --role-on-deep-soft: #f0dfe2;
}
[data-theme="sand-clinic"] {
  color-scheme: light;
  --role-ink: #1d1812;
  --role-page: #fffdfa;
  --role-surface: #f7f3ec;
  --role-accent: #7a5f3e;
  --role-accent-deep: #43341f;
  --role-line: #ebe4d9;
  --role-on-photo: #ffffff;
  --role-overlay: #1d1812;
  --role-surface-2: #f1ebe1;
  --role-line-strong: #e0d7c9;
  --role-accent-soft: #ece2d3;
  --role-ink-soft: #736a5f;
  --role-ink-nav: #2b251e;
  --role-ink-black: #120e09;
  --role-ink-deep: #43341f;
  --role-on-accent: #ffffff;
  --role-on-deep: #ffffff;
  --role-on-deep-soft: #ece2d3;
}
[data-theme="evening-clinic"] {
  color-scheme: dark;
  --role-ink: #eef2ef;
  --role-page: #111614;
  --role-surface: #18201d;
  --role-accent: #a9c8bf;
  --role-accent-deep: #24433d;
  --role-line: #26302c;
  --role-on-photo: #ffffff;
  --role-overlay: #151917;
  --role-surface-2: #1d2622;
  --role-line-strong: #2e3a35;
  --role-accent-soft: #203430;
  --role-ink-soft: #a3ada8;
  --role-ink-nav: #e4e9e6;
  --role-ink-black: #eef2ef;
  --role-ink-deep: #b9d6cd;
  --role-on-accent: #111614;
  --role-on-deep: #ffffff;
  --role-on-deep-soft: #cfe0da;
}
[data-theme="inverted"] {
  color-scheme: dark;
  --role-ink: #ffffff;
  --role-page: #151917;
  --role-surface: #1c2220;
  --role-accent: #dce6e3;
  --role-accent-deep: #2f4744;
  --role-line: #2a312e;
  --role-on-photo: #ffffff;
  --role-overlay: #151917;
  --role-surface-2: #222926;
  --role-line-strong: #333b37;
  --role-accent-soft: #26342f;
  --role-ink-soft: #a8b1ac;
  --role-ink-nav: #f1f3f2;
  --role-ink-black: #ffffff;
  --role-ink-deep: #dce6e3;
  --role-on-accent: #151917;
  --role-on-deep: #ffffff;
  --role-on-deep-soft: #dce6e3;
}

/* 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-92-2-line: color-mix(in srgb, var(--role-accent-deep) 92.2%, var(--role-line));
  --tone-page-84-ink-nav: color-mix(in srgb, var(--role-page) 84%, var(--role-ink-nav));
  --tone-ink-black-a26: rgb(from var(--role-ink-black) r g b / calc(26 / 255));
  --tone-jet-a26: rgb(from var(--color-jet) r g b / calc(26 / 255));
  --tone-page-76-ink-nav: color-mix(in srgb, var(--role-page) 76%, var(--role-ink-nav));
  --tone-ink-nav-82-ink-black: color-mix(in srgb, var(--role-ink-nav) 82%, var(--role-ink-black));
  --tone-ink-black-12: rgb(from var(--role-ink-black) r g b / 12%);
  --tone-accent-soft-a64: rgb(from var(--role-accent-soft) r g b / calc(64 / 255));
  --tone-ink-nav-95-1-page: color-mix(in srgb, var(--role-ink-nav) 95.1%, var(--role-page));
  --tone-page-81-1-line: color-mix(in srgb, var(--role-page) 81.1%, var(--role-line));
  --tone-page-74-1-ink-nav: color-mix(in srgb, var(--role-page) 74.1%, var(--role-ink-nav));
  --tone-ink-black-60: rgb(from var(--role-ink-black) r g b / 60%);
  --tone-overlay-a179: rgb(from var(--role-overlay) r g b / calc(179 / 255));
  --tone-page-52-2-ink-nav: color-mix(in srgb, var(--role-page) 52.2%, var(--role-ink-nav));
  --tone-ink-black-40: rgb(from var(--role-ink-black) r g b / 40%);
  --tone-page-a36: rgb(from var(--role-page) r g b / calc(36 / 255));
  --tone-page-92-ink-nav: color-mix(in srgb, var(--role-page) 92%, var(--role-ink-nav));
  --tone-ink-black-a13: rgb(from var(--role-ink-black) r g b / calc(13 / 255));
  --tone-page-94-ink-nav: color-mix(in srgb, var(--role-page) 94%, var(--role-ink-nav));
  --tone-page-58-2-ink-nav: color-mix(in srgb, var(--role-page) 58.2%, var(--role-ink-nav));
  --tone-page-a224: rgb(from var(--role-page) r g b / calc(224 / 255));
  --tone-overlay-a184: rgb(from var(--role-overlay) r g b / calc(184 / 255));
  --tone-overlay-a13: rgb(from var(--role-overlay) r g b / calc(13 / 255));
  --tone-overlay-a128: rgb(from var(--role-overlay) r g b / calc(128 / 255));
  --tone-page-20: rgb(from var(--role-page) r g b / 20%);
  --tone-overlay-40: rgb(from var(--role-overlay) r g b / 40%);
  --tone-ink-92: color-mix(in srgb, var(--role-ink) 92%, transparent);
  --tone-page-94-ink-nav-70-check-navy: color-mix(in srgb, color-mix(in srgb, var(--role-page) 94%, var(--role-ink-nav)) 70%, var(--color-check-navy));
  --tone-page-86-3-ink-nav: color-mix(in srgb, var(--role-page) 86.3%, var(--role-ink-nav));
  --tone-page-94-2-ink-nav: color-mix(in srgb, var(--role-page) 94.2%, var(--role-ink-nav));
  --tone-ink-nav-82-ink-black-40: rgb(from color-mix(in srgb, var(--role-ink-nav) 82%, var(--role-ink-black)) r g b / 40%);
  --tone-page-40: rgb(from var(--role-page) r g b / 40%);
  --tone-ink-black-90: rgb(from var(--role-ink-black) r g b / 90%);
  --tone-overlay-a64: rgb(from var(--role-overlay) r g b / calc(64 / 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-line-strong-78-ink-soft: color-mix(in srgb, var(--role-line-strong) 78%, var(--role-ink-soft));
  --tone-line-strong-90-ink-soft: color-mix(in srgb, var(--role-line-strong) 90%, var(--role-ink-soft));
  --tone-line-strong-61-ink-soft: color-mix(in srgb, var(--role-line-strong) 61%, var(--role-ink-soft));
  --tone-ink-soft-59-4-line-strong: color-mix(in srgb, var(--role-ink-soft) 59.4%, var(--role-line-strong));
  --tone-ink-soft-81-1-accent-soft: color-mix(in srgb, var(--role-ink-soft) 81.1%, var(--role-accent-soft));
}

/* 4b. Photo areas: text inside that reads the page colour reads Text on photos instead (same colour in Original) */
.home1_hero_inset,
.home3_cover_inset,
.image-banner,
.bento_image-tile,
.specialist-card_media {
  --role-page: var(--role-on-photo);
  --role-on-accent: var(--role-on-photo);
  --role-on-deep: var(--role-on-photo);
  --button-secondary-bg: var(--role-page-outer);
  --tone-page-16: rgb(from var(--role-page) r g b / 16%);
  --tone-page-84-ink-nav: color-mix(in srgb, var(--role-page) 84%, var(--role-ink-nav));
  --tone-page-76-ink-nav: color-mix(in srgb, var(--role-page) 76%, var(--role-ink-nav));
  --tone-ink-nav-95-1-page: color-mix(in srgb, var(--role-ink-nav) 95.1%, var(--role-page));
  --tone-page-81-1-line: color-mix(in srgb, var(--role-page) 81.1%, var(--role-line));
  --tone-page-74-1-ink-nav: color-mix(in srgb, var(--role-page) 74.1%, var(--role-ink-nav));
  --tone-page-52-2-ink-nav: color-mix(in srgb, var(--role-page) 52.2%, var(--role-ink-nav));
  --tone-page-a36: rgb(from var(--role-page) r g b / calc(36 / 255));
  --tone-page-92-ink-nav: color-mix(in srgb, var(--role-page) 92%, var(--role-ink-nav));
  --tone-page-94-ink-nav: color-mix(in srgb, var(--role-page) 94%, var(--role-ink-nav));
  --tone-page-58-2-ink-nav: color-mix(in srgb, var(--role-page) 58.2%, var(--role-ink-nav));
  --tone-page-a224: rgb(from var(--role-page) r g b / calc(224 / 255));
  --tone-page-20: rgb(from var(--role-page) r g b / 20%);
  --tone-page-94-ink-nav-70-check-navy: color-mix(in srgb, color-mix(in srgb, var(--role-page) 94%, var(--role-ink-nav)) 70%, var(--color-check-navy));
  --tone-page-86-3-ink-nav: color-mix(in srgb, var(--role-page) 86.3%, var(--role-ink-nav));
  --tone-page-94-2-ink-nav: color-mix(in srgb, var(--role-page) 94.2%, var(--role-ink-nav));
  --tone-page-40: rgb(from var(--role-page) r g b / 40%);
  --button-primary-text: var(--role-on-accent-outer);
}
:root,
[data-theme] {
  --role-on-accent-outer: var(--role-on-accent);
  --role-on-deep-outer: var(--role-on-deep);
}
.home1_hero_inset,
.home3_cover_inset,
.image-banner,
.bento_image-tile,
.specialist-card_media {
  --role-ink: var(--color-forest-ink);
  --tone-page-84-ink-nav: color-mix(in srgb, var(--role-page) 84%, var(--role-ink-nav));
  --tone-ink-black-a26: rgb(from var(--role-ink-black) r g b / calc(26 / 255));
  --tone-page-76-ink-nav: color-mix(in srgb, var(--role-page) 76%, var(--role-ink-nav));
  --tone-ink-nav-82-ink-black: color-mix(in srgb, var(--role-ink-nav) 82%, var(--role-ink-black));
  --tone-ink-black-12: rgb(from var(--role-ink-black) r g b / 12%);
  --tone-ink-nav-95-1-page: color-mix(in srgb, var(--role-ink-nav) 95.1%, var(--role-page));
  --tone-page-74-1-ink-nav: color-mix(in srgb, var(--role-page) 74.1%, var(--role-ink-nav));
  --tone-ink-black-60: rgb(from var(--role-ink-black) r g b / 60%);
  --tone-page-52-2-ink-nav: color-mix(in srgb, var(--role-page) 52.2%, var(--role-ink-nav));
  --tone-ink-black-40: rgb(from var(--role-ink-black) r g b / 40%);
  --tone-page-92-ink-nav: color-mix(in srgb, var(--role-page) 92%, var(--role-ink-nav));
  --tone-ink-black-a13: rgb(from var(--role-ink-black) r g b / calc(13 / 255));
  --tone-page-94-ink-nav: color-mix(in srgb, var(--role-page) 94%, var(--role-ink-nav));
  --tone-page-58-2-ink-nav: color-mix(in srgb, var(--role-page) 58.2%, var(--role-ink-nav));
  --tone-ink-92: color-mix(in srgb, var(--role-ink) 92%, transparent);
  --tone-page-94-ink-nav-70-check-navy: color-mix(in srgb, color-mix(in srgb, var(--role-page) 94%, var(--role-ink-nav)) 70%, var(--color-check-navy));
  --tone-page-86-3-ink-nav: color-mix(in srgb, var(--role-page) 86.3%, var(--role-ink-nav));
  --tone-page-94-2-ink-nav: color-mix(in srgb, var(--role-page) 94.2%, var(--role-ink-nav));
  --tone-ink-nav-82-ink-black-40: rgb(from color-mix(in srgb, var(--role-ink-nav) 82%, var(--role-ink-black)) r g b / 40%);
  --tone-ink-black-90: rgb(from var(--role-ink-black) r g b / 90%);
  --tone-line-strong-78-ink-soft: color-mix(in srgb, var(--role-line-strong) 78%, var(--role-ink-soft));
  --tone-line-strong-90-ink-soft: color-mix(in srgb, var(--role-line-strong) 90%, var(--role-ink-soft));
  --tone-line-strong-61-ink-soft: color-mix(in srgb, var(--role-line-strong) 61%, var(--role-ink-soft));
  --tone-ink-soft-59-4-line-strong: color-mix(in srgb, var(--role-ink-soft) 59.4%, var(--role-line-strong));
  --tone-ink-soft-81-1-accent-soft: color-mix(in srgb, var(--role-ink-soft) 81.1%, var(--role-accent-soft));
  --button-secondary-text: var(--role-ink);
}
:root,
[data-theme] {
  --role-page-outer: var(--role-page);
}
.home1_hero_inset :is(input, select, textarea),
.home3_cover_inset :is(input, select, textarea),
.image-banner :is(input, select, textarea),
.bento_image-tile :is(input, select, textarea),
.specialist-card_media :is(input, select, textarea) {
  --role-page: var(--role-page-outer);
  --role-on-accent: var(--role-on-accent-outer);
  --role-on-deep: var(--role-on-deep-outer);
}

/* 4c. Accent blocks: text inside reads Text on accent, so it stays readable on the accent in every theme */
.faq-tabs_link.w--current,
.timeline_chip {
  --role-page: var(--role-on-accent);
  --role-on-photo: var(--role-on-accent);
  --role-on-deep: var(--role-on-accent);
  --tone-page-16: rgb(from var(--role-page) r g b / 16%);
  --tone-page-84-ink-nav: color-mix(in srgb, var(--role-page) 84%, var(--role-ink-nav));
  --tone-page-76-ink-nav: color-mix(in srgb, var(--role-page) 76%, var(--role-ink-nav));
  --tone-ink-nav-95-1-page: color-mix(in srgb, var(--role-ink-nav) 95.1%, var(--role-page));
  --tone-page-81-1-line: color-mix(in srgb, var(--role-page) 81.1%, var(--role-line));
  --tone-page-74-1-ink-nav: color-mix(in srgb, var(--role-page) 74.1%, var(--role-ink-nav));
  --tone-page-52-2-ink-nav: color-mix(in srgb, var(--role-page) 52.2%, var(--role-ink-nav));
  --tone-page-a36: rgb(from var(--role-page) r g b / calc(36 / 255));
  --tone-page-92-ink-nav: color-mix(in srgb, var(--role-page) 92%, var(--role-ink-nav));
  --tone-page-94-ink-nav: color-mix(in srgb, var(--role-page) 94%, var(--role-ink-nav));
  --tone-page-58-2-ink-nav: color-mix(in srgb, var(--role-page) 58.2%, var(--role-ink-nav));
  --tone-page-a224: rgb(from var(--role-page) r g b / calc(224 / 255));
  --tone-page-20: rgb(from var(--role-page) r g b / 20%);
  --tone-page-94-ink-nav-70-check-navy: color-mix(in srgb, color-mix(in srgb, var(--role-page) 94%, var(--role-ink-nav)) 70%, var(--color-check-navy));
  --tone-page-86-3-ink-nav: color-mix(in srgb, var(--role-page) 86.3%, var(--role-ink-nav));
  --tone-page-94-2-ink-nav: color-mix(in srgb, var(--role-page) 94.2%, var(--role-ink-nav));
  --tone-page-40: rgb(from var(--role-page) r g b / 40%);
  --button-secondary-bg: var(--role-page);
}
:where(.faq-tabs_link.w--current, .timeline_chip) {
  color: var(--role-on-accent);
}

/* 4d. Deep green bands: light text in every theme */
.section_home1_outcomes,
.section_home2_review,
.book-aside_card.is-deep,
.plan-card.is-featured,
.section_about_values {
  --role-page: var(--role-on-deep);
  --role-accent-soft: var(--role-on-deep-soft);
  --role-ink: var(--role-on-deep);
  --role-ink-deep: var(--color-pine-deep);
  --tone-page-16: rgb(from var(--role-page) r g b / 16%);
  --tone-page-84-ink-nav: color-mix(in srgb, var(--role-page) 84%, var(--role-ink-nav));
  --tone-ink-black-a26: rgb(from var(--role-ink-black) r g b / calc(26 / 255));
  --tone-page-76-ink-nav: color-mix(in srgb, var(--role-page) 76%, var(--role-ink-nav));
  --tone-ink-nav-82-ink-black: color-mix(in srgb, var(--role-ink-nav) 82%, var(--role-ink-black));
  --tone-ink-black-12: rgb(from var(--role-ink-black) r g b / 12%);
  --tone-accent-soft-a64: rgb(from var(--role-accent-soft) r g b / calc(64 / 255));
  --tone-ink-nav-95-1-page: color-mix(in srgb, var(--role-ink-nav) 95.1%, var(--role-page));
  --tone-page-81-1-line: color-mix(in srgb, var(--role-page) 81.1%, var(--role-line));
  --tone-page-74-1-ink-nav: color-mix(in srgb, var(--role-page) 74.1%, var(--role-ink-nav));
  --tone-ink-black-60: rgb(from var(--role-ink-black) r g b / 60%);
  --tone-page-52-2-ink-nav: color-mix(in srgb, var(--role-page) 52.2%, var(--role-ink-nav));
  --tone-ink-black-40: rgb(from var(--role-ink-black) r g b / 40%);
  --tone-page-a36: rgb(from var(--role-page) r g b / calc(36 / 255));
  --tone-page-92-ink-nav: color-mix(in srgb, var(--role-page) 92%, var(--role-ink-nav));
  --tone-ink-black-a13: rgb(from var(--role-ink-black) r g b / calc(13 / 255));
  --tone-page-94-ink-nav: color-mix(in srgb, var(--role-page) 94%, var(--role-ink-nav));
  --tone-page-58-2-ink-nav: color-mix(in srgb, var(--role-page) 58.2%, var(--role-ink-nav));
  --tone-page-a224: rgb(from var(--role-page) r g b / calc(224 / 255));
  --tone-page-20: rgb(from var(--role-page) r g b / 20%);
  --tone-ink-92: color-mix(in srgb, var(--role-ink) 92%, transparent);
  --tone-page-94-ink-nav-70-check-navy: color-mix(in srgb, color-mix(in srgb, var(--role-page) 94%, var(--role-ink-nav)) 70%, var(--color-check-navy));
  --tone-page-86-3-ink-nav: color-mix(in srgb, var(--role-page) 86.3%, var(--role-ink-nav));
  --tone-page-94-2-ink-nav: color-mix(in srgb, var(--role-page) 94.2%, var(--role-ink-nav));
  --tone-ink-nav-82-ink-black-40: rgb(from color-mix(in srgb, var(--role-ink-nav) 82%, var(--role-ink-black)) r g b / 40%);
  --tone-page-40: rgb(from var(--role-page) r g b / 40%);
  --tone-ink-black-90: rgb(from var(--role-ink-black) r g b / 90%);
  --tone-line-strong-78-ink-soft: color-mix(in srgb, var(--role-line-strong) 78%, var(--role-ink-soft));
  --tone-line-strong-90-ink-soft: color-mix(in srgb, var(--role-line-strong) 90%, var(--role-ink-soft));
  --tone-line-strong-61-ink-soft: color-mix(in srgb, var(--role-line-strong) 61%, var(--role-ink-soft));
  --tone-ink-soft-59-4-line-strong: color-mix(in srgb, var(--role-ink-soft) 59.4%, var(--role-line-strong));
  --tone-ink-soft-81-1-accent-soft: color-mix(in srgb, var(--role-ink-soft) 81.1%, var(--role-accent-soft));
  --button-secondary-bg: var(--role-page);
  --button-secondary-text: var(--role-ink);
}

/* 4d. White cards on the photos: they keep their Original colours in every theme */
.home1_hero_card,
.booking-panel {
  --role-ink-soft: var(--color-moss);
  --role-ink-deep: var(--color-pine-deep);
  --role-accent: var(--color-sage);
  --role-on-accent: var(--color-white);
  --tone-accent-deep-92-2-line: color-mix(in srgb, var(--role-accent-deep) 92.2%, var(--role-line));
  --tone-accent-soft-a64: rgb(from var(--role-accent-soft) r g b / calc(64 / 255));
  --tone-line-strong-78-ink-soft: color-mix(in srgb, var(--role-line-strong) 78%, var(--role-ink-soft));
  --tone-line-strong-90-ink-soft: color-mix(in srgb, var(--role-line-strong) 90%, var(--role-ink-soft));
  --tone-line-strong-61-ink-soft: color-mix(in srgb, var(--role-line-strong) 61%, var(--role-ink-soft));
  --tone-ink-soft-59-4-line-strong: color-mix(in srgb, var(--role-ink-soft) 59.4%, var(--role-line-strong));
  --tone-ink-soft-81-1-accent-soft: color-mix(in srgb, var(--role-ink-soft) 81.1%, var(--role-accent-soft));
  --button-primary-bg: var(--role-accent);
  --button-primary-text: var(--role-on-accent);
}
:where(.home1_hero_card, .bento_caption, .booking-panel) {
  color: var(--role-ink);
}

/* 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: 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-tiny: .75rem;
  --size-body-small: .875rem;
  --size-badge: .75rem;
  --size-button-normal: 1rem;
  --size-button-small: .875rem;
  --size-0-875rem: .875rem;
  --size-1-25rem: 1.25rem;
  --size-12: 12px;
  --size-17: 17px;
  --size-16: 16px;
  --size-0-75rem: .75rem;
  --size-18: 18px;
  --size-2-5rem: 2.5rem;
  --size-1-75rem: 1.75rem;
  --size-3rem: 3rem;
  --size-5-7vw: 5.7vw;
  --size-5-5rem: 5.5rem;
  --size-64: 64px;
  --size-14: 14px;
  --size-1rem: 1rem;
  --size-1-125rem: 1.125rem;
  --size-2-8rem: 2.8rem;
  --size-display-fluid: clamp(3rem, 5.7vw, 5.5rem);
  --leading-body-medium: 150%;
  --leading-h1: 105%;
  --leading-h2: 110%;
  --leading-h3: 115%;
  --leading-h4: 120%;
  --leading-h5: 125%;
  --leading-h6: 130%;
  --leading-body-large: 150%;
  --leading-body-tiny: 150%;
  --leading-badge: 140%;
  --leading-button-normal: 150%;
  --leading-button-small: 150%;
  --leading-body-small: 150%;
  --leading-display: 100%;
  --leading-140: 1.4;
  --leading-160: 1.6;
  --leading-150: 1.5;
  --leading-100: 1;
  --leading-125: 1.25;
  --leading-135: 1.35;
  --leading-170: 1.7;
  --leading-165: 1.65;
  --tracking-0-08em: .08em;
  --tracking-n0-01em: -.01em;
  --tracking-n0-02em: -.02em;
  --tracking-n0-03em: -.03em;
  --tracking-0-6: .6px;
}

/* 7. Spacing: 4px base. Values off the 4px grid keep their own token; rem values keep rem. */
:root {
  --container-width: 1300px;
  --section-spacing: 1;
  --section-padding-medium: 96px;
  --section-padding-large: 144px;
  --section-padding-small: 48px;
  --spacing-1: 1px;
  --spacing-2: 2px;
  --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-17: 17px;
  --spacing-18: 18px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-64: 64px;
  --spacing-72: 72px;
  --spacing-80: 80px;
  --spacing-96: 96px;
  --spacing-240: 240px;
  --spacing-300: 300px;
  --spacing-1rem: 1rem;
  --spacing-1-5rem: 1.5rem;
  --spacing-2rem: 2rem;
  --spacing-0-75rem: .75rem;
  --spacing-3rem: 3rem;
  --spacing-4rem: 4rem;
  --spacing-0-5rem: .5rem;
  --spacing-6rem: 6rem;
  --spacing-0-375rem: .375rem;
  --spacing-1-25rem: 1.25rem;
  --spacing-0-25rem: .25rem;
  --spacing-2-5rem: 2.5rem;
  --spacing-5rem: 5rem;
  --spacing-3-5rem: 3.5rem;
  --spacing-8rem: 8rem;
  --spacing-0-5625rem: .5625rem;
  --spacing-0-125rem: .125rem;
  --spacing-12rem: 12rem;
  --spacing-1-125rem: 1.125rem;
  --spacing-0-0625rem: .0625rem;
  --spacing-4-5rem: 4.5rem;
  --spacing-0-875rem: .875rem;
  --spacing-0-3rem: .3rem;
  --spacing-3-75rem: 3.75rem;
  --spacing-0-6rem: .6rem;
  --spacing-1-75rem: 1.75rem;
}

/* 7b. Breakpoint values for the role sizes, section paddings and other responsive tokens */
@media screen and (max-width: 991px) {
  :root {
    --size-h1: 3.5rem;
    --size-h2: 2.625rem;
    --size-h3: 2rem;
    --size-h4: 1.625rem;
    --size-display: 4.5rem;
    --section-padding-medium: 84px;
    --section-padding-large: 128px;
    --section-padding-small: 44px;
  }
}
@media screen and (max-width: 767px) {
  :root {
    --size-h1: 2.75rem;
    --size-h2: 2.25rem;
    --size-h3: 1.75rem;
    --size-h4: 1.5rem;
    --size-h5: 1.25rem;
    --size-display: 3.25rem;
    --size-body-large: 1.0625rem;
    --section-padding-medium: 72px;
    --section-padding-large: 112px;
    --section-padding-small: 40px;
  }
}
@media screen and (max-width: 479px) {
  :root {
    --size-h1: 2.5rem;
    --size-h2: 2rem;
    --size-h3: 1.625rem;
    --size-h4: 1.375rem;
    --size-h5: 1.25rem;
    --size-display: 2.75rem;
    --size-body-large: 1rem;
    --section-padding-medium: 72px;
    --section-padding-large: 112px;
    --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: 8px;
  --radius-button: 100px;
  --radius-pill: var(--radius-button);
  --radius-2: calc(var(--radius-card) * 2 / 8);
  --radius-10: calc(var(--radius-card) * 10 / 8);
  --radius-12: calc(var(--radius-card) * 12 / 8);
  --radius-16: calc(var(--radius-card) * 16 / 8);
  --radius-20: calc(var(--radius-card) * 20 / 8);
  --radius-50: calc(var(--radius-card) * 50 / 8);
  --radius-60: calc(var(--radius-card) * 60 / 8);
  --radius-100: calc(var(--radius-card) * 100 / 8);
  --radius-0-75rem: calc(var(--radius-card) * 12 / 8);
  --radius-0-125rem: calc(var(--radius-card) * 2 / 8);
  --radius-0-25rem: calc(var(--radius-card) * 4 / 8);
}

/* 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-on-accent);
  --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);
}

/* 10. Shadows and focus */
:root,
[data-theme] {
  --shadow-1: 0 0 3px 1px var(--role-accent);
  --shadow-2: 0 0 .25rem 0 var(--role-accent);
  --shadow-3: 0 16px 36px var(--tone-jet-a18), 0 40px 40px var(--tone-jet-a8);
  --shadow-4: 0 24px 48px -24px var(--tone-overlay-a64);
  --focus-ring: var(--role-accent);
}

/* 11. Motion */
:root {
  --motion-fast: .2s;
  --motion-base: .3s;
  --motion-quick: .25s;
  --motion-slow: .6s;
  --ease-1: cubic-bezier(.25, .46, .45, .94);
  --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 */