/* Strategis design system: theme.css (palette, roles, themes and every token).
   Generated by _tools/design-system/generate.mjs from _tools/design-system/maps/strategis.mjs (with strategis.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-mist: #fafafa;
  --color-fog: #f7f7f7;
  --color-light-line: #f2f2f2;
  --color-grey-line: #ededed;
  --color-mint-wash: #f3f6f5;
  --color-black: #000000;
  --color-ash: #727272;
  --color-night: #161616;
  --color-jet: #000000;
  --color-pine: #094635;
  --color-warning-wash: #fcf8d8;
  --color-warning-ink: #5e5515;
  --color-check-navy: #061b31;
  --color-error-ink: #3b0b0b;
  --color-error-wash: #f8e4e4;
}

/* 2. Colour roles: Original */
:root {
  --role-ink: var(--color-black);
  --role-page: var(--color-white);
  --role-surface: var(--color-mist);
  --role-accent: var(--color-pine);
  --role-accent-deep: var(--color-pine);
  --role-line: var(--color-light-line);
  --role-on-photo: var(--color-white);
  --role-overlay: var(--color-jet);
  --role-surface-2: var(--color-fog);
  --role-line-strong: var(--color-grey-line);
  --role-accent-soft: var(--color-mint-wash);
  --role-ink-soft: var(--color-ash);
  --role-band: var(--color-night);
  --role-ink-soft-card: var(--color-ash);
  --role-on-accent: var(--color-white);
}

/* 3. Themes: each sets every role. Photo overlay stays dark in every theme. */
[data-theme="original"] {
  --role-ink: var(--color-black);
  --role-page: var(--color-white);
  --role-surface: var(--color-mist);
  --role-accent: var(--color-pine);
  --role-accent-deep: var(--color-pine);
  --role-line: var(--color-light-line);
  --role-on-photo: var(--color-white);
  --role-overlay: var(--color-jet);
  --role-surface-2: var(--color-fog);
  --role-line-strong: var(--color-grey-line);
  --role-accent-soft: var(--color-mint-wash);
  --role-ink-soft: var(--color-ash);
  --role-band: var(--color-night);
  --role-ink-soft-card: var(--color-ash);
  --role-on-accent: var(--color-white);
}
[data-theme="ocean-desk"] {
  color-scheme: light;
  --role-ink: #0b1626;
  --role-page: #ffffff;
  --role-surface: #f7f9fb;
  --role-accent: #123e6b;
  --role-accent-deep: #0e3256;
  --role-line: #eef1f5;
  --role-on-photo: #ffffff;
  --role-overlay: #000000;
  --role-surface-2: #f3f6f9;
  --role-line-strong: #e7ecf1;
  --role-accent-soft: #eef4fa;
  --role-ink-soft: #66717f;
  --role-band: #141c27;
  --role-ink-soft-card: #66717f;
  --role-on-accent: #ffffff;
}
[data-theme="sandstone"] {
  color-scheme: light;
  --role-ink: #1c130c;
  --role-page: #fffdfa;
  --role-surface: #faf7f2;
  --role-accent: #6b3a16;
  --role-accent-deep: #562e12;
  --role-line: #f2ede6;
  --role-on-photo: #ffffff;
  --role-overlay: #000000;
  --role-surface-2: #f6f1ea;
  --role-line-strong: #ece5dc;
  --role-accent-soft: #fcf8f2;
  --role-ink-soft: #7a6f66;
  --role-band: #1f1712;
  --role-ink-soft-card: #7a6f66;
  --role-on-accent: #ffffff;
}
[data-theme="plum-study"] {
  color-scheme: light;
  --role-ink: #1a0f1c;
  --role-page: #fffcff;
  --role-surface: #faf7fa;
  --role-accent: #5a2059;
  --role-accent-deep: #481a47;
  --role-line: #f2edf2;
  --role-on-photo: #ffffff;
  --role-overlay: #000000;
  --role-surface-2: #f6f1f6;
  --role-line-strong: #ece4ec;
  --role-accent-soft: #f7eff7;
  --role-ink-soft: #76697a;
  --role-band: #1d141e;
  --role-ink-soft-card: #76697a;
  --role-on-accent: #ffffff;
}
[data-theme="forest-night"] {
  color-scheme: dark;
  --role-ink: #eef4f1;
  --role-page: #0c1411;
  --role-surface: #121c18;
  --role-accent: #7fd1b2;
  --role-accent-deep: #a5dfc9;
  --role-line: #1e2a25;
  --role-on-photo: #ffffff;
  --role-overlay: #000000;
  --role-surface-2: #16211c;
  --role-line-strong: #25332d;
  --role-accent-soft: #0f2a20;
  --role-ink-soft: #9fb0a8;
  --role-band: #e4ece8;
  --role-ink-soft-card: #4d5c55;
  --role-on-accent: #06140f;
}
[data-theme="inverted"] {
  color-scheme: dark;
  --role-ink: #ffffff;
  --role-page: #000000;
  --role-surface: #0d0d0d;
  --role-accent: #8fd8bd;
  --role-accent-deep: #b1e4d1;
  --role-line: #1f1f1f;
  --role-on-photo: #ffffff;
  --role-overlay: #000000;
  --role-surface-2: #121212;
  --role-line-strong: #262626;
  --role-accent-soft: #0c2a1f;
  --role-ink-soft: #a3a3a3;
  --role-band: #ededed;
  --role-ink-soft-card: #5c5c5c;
  --role-on-accent: #000000;
}

/* 4. Derived colours: worked out from roles with color-mix, never stored */
:root,
[data-theme] {
  --tone-band-94-ink: color-mix(in srgb, var(--role-band) 94%, var(--role-ink));
  --tone-page-16: rgb(from var(--role-page) r g b / 16%);
  --tone-band-86-ink-soft: color-mix(in srgb, var(--role-band) 86%, var(--role-ink-soft));
  --tone-ink-soft-69-2-line: color-mix(in srgb, var(--role-ink-soft) 69.2%, var(--role-line));
  --tone-surface-2-80-1-ink-soft: color-mix(in srgb, var(--role-surface-2) 80.1%, var(--role-ink-soft));
  --tone-line-91-ink-soft: color-mix(in srgb, var(--role-line) 91%, var(--role-ink-soft));
  --tone-overlay-a128: rgb(from var(--role-overlay) r g b / calc(128 / 255));
  --tone-overlay-a179: rgb(from var(--role-overlay) r g b / calc(179 / 255));
  --tone-ink-a26: rgb(from var(--role-ink) r g b / calc(26 / 255));
  --tone-overlay-a26: rgb(from var(--role-overlay) r g b / calc(26 / 255));
  --tone-ink-60: rgb(from var(--role-ink) r g b / 60%);
  --tone-overlay-60: rgb(from var(--role-overlay) r g b / 60%);
  --tone-ink-66-band-40: rgb(from color-mix(in srgb, var(--role-ink) 66%, var(--role-band)) r g b / 40%);
  --tone-line-70-ink-soft: color-mix(in srgb, var(--role-line) 70%, var(--role-ink-soft));
  --tone-band-87-ink-soft: color-mix(in srgb, var(--role-band) 87%, var(--role-ink-soft));
  --tone-overlay-80: rgb(from var(--role-overlay) r g b / 80%);
  --tone-ink-20: rgb(from var(--role-ink) r g b / 20%);
  --tone-overlay-20: rgb(from var(--role-overlay) r g b / 20%);
  --tone-band-68-ink-soft: color-mix(in srgb, var(--role-band) 68%, var(--role-ink-soft));
  --tone-surface-63-ink-soft: color-mix(in srgb, var(--role-surface) 63%, var(--role-ink-soft));
  --tone-ink-40: rgb(from var(--role-ink) r g b / 40%);
  --tone-band-92: color-mix(in srgb, var(--role-band) 92%, transparent);
  --tone-ink-a13: rgb(from var(--role-ink) r g b / calc(13 / 255));
  --tone-accent-soft-a217: rgb(from var(--role-accent-soft) r g b / calc(217 / 255));
  --tone-page-a128: rgb(from var(--role-page) r g b / calc(128 / 255));
  --tone-page-a13: rgb(from var(--role-page) r g b / calc(13 / 255));
  --tone-page-20: rgb(from var(--role-page) r g b / 20%);
  --tone-ink-22-page-85-check-navy: color-mix(in srgb, color-mix(in srgb, var(--role-ink) 22%, var(--role-page)) 85%, var(--color-check-navy));
  --tone-surface-82-ink-soft: color-mix(in srgb, var(--role-surface) 82%, var(--role-ink-soft));
  --tone-line-strong-71-line: color-mix(in srgb, var(--role-line-strong) 71%, var(--role-line));
  --tone-line-71-surface-2: color-mix(in srgb, var(--role-line) 71%, var(--role-surface-2));
  --tone-band-87-ink-soft-40: rgb(from color-mix(in srgb, var(--role-band) 87%, var(--role-ink-soft)) r g b / 40%);
  --tone-page-40: rgb(from var(--role-page) r g b / 40%);
  --tone-ink-90: rgb(from var(--role-ink) r g b / 90%);
  --tone-overlay-a8: rgb(from var(--role-overlay) r g b / calc(8 / 255));
  --tone-overlay-a64: rgb(from var(--role-overlay) r g b / calc(64 / 255));
  --tone-line-strong-88-ink-soft: color-mix(in srgb, var(--role-line-strong) 88%, var(--role-ink-soft));
  --tone-page-73-ink-soft: color-mix(in srgb, var(--role-page) 73%, var(--role-ink-soft));
  --tone-surface-70-ink-soft: color-mix(in srgb, var(--role-surface) 70%, var(--role-ink-soft));
  --tone-surface-2-60-ink-soft: color-mix(in srgb, var(--role-surface-2) 60%, var(--role-ink-soft));
}

/* 4b. Photo areas: text inside that reads the page colour reads Text on photos instead (same colour in Original) */
.section_home2_hero,
.section_post_hero,
.section_case_hero,
.section_home1_banner,
.services2_hero_wrapper,
.pricing_hero_wrapper,
.blog_hero_wrapper,
.home1_hero_video-preview,
.about2_hero_video-preview,
.footer_buy,
.customers_hero_qoute,
.home2_about_main,
.home2_testimonials_left,
.home1_services_highlight,
.home2_services_highlight,
.home3_services_highlight,
.about1_values_highlight,
.about2_values_highlight,
.about3_values_highlight,
.case_hero_gradient,
.case_hero_result,
.home1_banner_call {
  --role-page: var(--role-on-photo);
  --role-on-accent: 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-a128: rgb(from var(--role-page) r g b / calc(128 / 255));
  --tone-page-a13: rgb(from var(--role-page) r g b / calc(13 / 255));
  --tone-page-20: rgb(from var(--role-page) r g b / 20%);
  --tone-ink-22-page-85-check-navy: color-mix(in srgb, color-mix(in srgb, var(--role-ink) 22%, var(--role-page)) 85%, var(--color-check-navy));
  --tone-page-40: rgb(from var(--role-page) r g b / 40%);
  --tone-page-73-ink-soft: color-mix(in srgb, var(--role-page) 73%, var(--role-ink-soft));
  --button-primary-text: var(--role-on-accent-outer);
}
:root,
[data-theme] {
  --role-on-accent-outer: var(--role-on-accent);
}
.section_home2_hero,
.section_post_hero,
.section_case_hero,
.section_home1_banner,
.services2_hero_wrapper,
.pricing_hero_wrapper,
.blog_hero_wrapper,
.home1_hero_video-preview,
.about2_hero_video-preview,
.footer_buy,
.customers_hero_qoute,
.home2_about_main,
.home2_testimonials_left,
.home1_services_highlight,
.home2_services_highlight,
.home3_services_highlight,
.about1_values_highlight,
.about2_values_highlight,
.about3_values_highlight,
.case_hero_gradient,
.case_hero_result,
.home1_banner_call {
  --role-ink: var(--role-overlay);
  --tone-band-94-ink: color-mix(in srgb, var(--role-band) 94%, var(--role-ink));
  --tone-band-86-ink-soft: color-mix(in srgb, var(--role-band) 86%, var(--role-ink-soft));
  --tone-ink-soft-69-2-line: color-mix(in srgb, var(--role-ink-soft) 69.2%, var(--role-line));
  --tone-surface-2-80-1-ink-soft: color-mix(in srgb, var(--role-surface-2) 80.1%, var(--role-ink-soft));
  --tone-line-91-ink-soft: color-mix(in srgb, var(--role-line) 91%, var(--role-ink-soft));
  --tone-ink-a26: rgb(from var(--role-ink) r g b / calc(26 / 255));
  --tone-ink-60: rgb(from var(--role-ink) r g b / 60%);
  --tone-ink-66-band-40: rgb(from color-mix(in srgb, var(--role-ink) 66%, var(--role-band)) r g b / 40%);
  --tone-line-70-ink-soft: color-mix(in srgb, var(--role-line) 70%, var(--role-ink-soft));
  --tone-band-87-ink-soft: color-mix(in srgb, var(--role-band) 87%, var(--role-ink-soft));
  --tone-ink-20: rgb(from var(--role-ink) r g b / 20%);
  --tone-band-68-ink-soft: color-mix(in srgb, var(--role-band) 68%, var(--role-ink-soft));
  --tone-surface-63-ink-soft: color-mix(in srgb, var(--role-surface) 63%, var(--role-ink-soft));
  --tone-ink-40: rgb(from var(--role-ink) r g b / 40%);
  --tone-ink-a13: rgb(from var(--role-ink) r g b / calc(13 / 255));
  --tone-ink-22-page-85-check-navy: color-mix(in srgb, color-mix(in srgb, var(--role-ink) 22%, var(--role-page)) 85%, var(--color-check-navy));
  --tone-surface-82-ink-soft: color-mix(in srgb, var(--role-surface) 82%, var(--role-ink-soft));
  --tone-band-87-ink-soft-40: rgb(from color-mix(in srgb, var(--role-band) 87%, var(--role-ink-soft)) r g b / 40%);
  --tone-ink-90: rgb(from var(--role-ink) r g b / 90%);
  --tone-line-strong-88-ink-soft: color-mix(in srgb, var(--role-line-strong) 88%, var(--role-ink-soft));
  --tone-page-73-ink-soft: color-mix(in srgb, var(--role-page) 73%, var(--role-ink-soft));
  --tone-surface-70-ink-soft: color-mix(in srgb, var(--role-surface) 70%, var(--role-ink-soft));
  --tone-surface-2-60-ink-soft: color-mix(in srgb, var(--role-surface-2) 60%, var(--role-ink-soft));
  --button-secondary-text: var(--role-ink);
}
:root,
[data-theme] {
  --role-page-outer: var(--role-page);
}
.section_home2_hero :is(input, select, textarea),
.section_post_hero :is(input, select, textarea),
.section_case_hero :is(input, select, textarea),
.section_home1_banner :is(input, select, textarea),
.services2_hero_wrapper :is(input, select, textarea),
.pricing_hero_wrapper :is(input, select, textarea),
.blog_hero_wrapper :is(input, select, textarea),
.home1_hero_video-preview :is(input, select, textarea),
.about2_hero_video-preview :is(input, select, textarea),
.footer_buy :is(input, select, textarea),
.customers_hero_qoute :is(input, select, textarea),
.home2_about_main :is(input, select, textarea),
.home2_testimonials_left :is(input, select, textarea),
.home1_services_highlight :is(input, select, textarea),
.home2_services_highlight :is(input, select, textarea),
.home3_services_highlight :is(input, select, textarea),
.about1_values_highlight :is(input, select, textarea),
.about2_values_highlight :is(input, select, textarea),
.about3_values_highlight :is(input, select, textarea),
.case_hero_gradient :is(input, select, textarea),
.case_hero_result :is(input, select, textarea),
.home1_banner_call :is(input, select, textarea) {
  --role-page: var(--role-page-outer);
  --role-on-accent: var(--role-on-accent-outer);
}

/* 4d. Black cards: soft text reads its own role, a dark grey on the light cards of the dark themes */
.background-color-primary,
.home1_case_result,
.home2_case_result,
.home3_case_result,
.customers_featured_result,
.home1_hero_qoute,
.home2_process_qoute,
.home1_process_qoute,
.home3_process_qoute,
.customers_hero_qoute,
.about2_hero_qoute,
.home2_banner_grid,
.highlight_marquee,
.plan_form_staff {
  --role-ink-soft: var(--role-ink-soft-card);
  --tone-band-86-ink-soft: color-mix(in srgb, var(--role-band) 86%, var(--role-ink-soft));
  --tone-ink-soft-69-2-line: color-mix(in srgb, var(--role-ink-soft) 69.2%, var(--role-line));
  --tone-surface-2-80-1-ink-soft: color-mix(in srgb, var(--role-surface-2) 80.1%, var(--role-ink-soft));
  --tone-line-91-ink-soft: color-mix(in srgb, var(--role-line) 91%, var(--role-ink-soft));
  --tone-line-70-ink-soft: color-mix(in srgb, var(--role-line) 70%, var(--role-ink-soft));
  --tone-band-87-ink-soft: color-mix(in srgb, var(--role-band) 87%, var(--role-ink-soft));
  --tone-band-68-ink-soft: color-mix(in srgb, var(--role-band) 68%, var(--role-ink-soft));
  --tone-surface-63-ink-soft: color-mix(in srgb, var(--role-surface) 63%, var(--role-ink-soft));
  --tone-surface-82-ink-soft: color-mix(in srgb, var(--role-surface) 82%, var(--role-ink-soft));
  --tone-band-87-ink-soft-40: rgb(from color-mix(in srgb, var(--role-band) 87%, var(--role-ink-soft)) r g b / 40%);
  --tone-line-strong-88-ink-soft: color-mix(in srgb, var(--role-line-strong) 88%, var(--role-ink-soft));
  --tone-page-73-ink-soft: color-mix(in srgb, var(--role-page) 73%, var(--role-ink-soft));
  --tone-surface-70-ink-soft: color-mix(in srgb, var(--role-surface) 70%, var(--role-ink-soft));
  --tone-surface-2-60-ink-soft: color-mix(in srgb, var(--role-surface-2) 60%, var(--role-ink-soft));
}
:where(.blog-date) {
  color: var(--role-ink);
}

/* 5. Fonts */
:root {
  --font-heading: Geist, sans-serif;
  --font-body: Geist, sans-serif;
  --font-highlight: Newsreader, 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: 3.5rem;
  --size-h2: 2.5rem;
  --size-h3: 2rem;
  --size-h4: 1.75rem;
  --size-h4-heading-style-h4: 1.75rem;
  --size-h5: 1.25rem;
  --size-h5-heading-style-h5: 1.25rem;
  --size-h6: 1.125rem;
  --size-h6-heading-style-h6: 1.125rem;
  --size-body-medium: 1rem;
  --size-body-tiny: .755rem;
  --size-body-regular: 1rem;
  --size-body-small: .8755rem;
  --size-body-large: 1.125rem;
  --size-badge: .875rem;
  --size-0-875rem: .875rem;
  --size-1rem: 1rem;
  --size-1-25rem: 1.25rem;
  --size-2-5rem: 2.5rem;
  --size-2rem: 2rem;
  --size-3-5rem: 3.5rem;
  --size-1-125rem: 1.125rem;
  --size-16: 16px;
  --size-1-75rem: 1.75rem;
  --size-0-75rem: .75rem;
  --size-1-5rem: 1.5rem;
  --size-11: 11px;
  --size-0-755rem: .755rem;
  --size-0-8755rem: .8755rem;
  --size-8-75rem: 8.75rem;
  --size-4-5rem: 4.5rem;
  --size-0-85rem: .85rem;
  --size-6-25rem: 6.25rem;
  --size-4-375rem: 4.375rem;
  --leading-20: 20px;
  --leading-140: 1.4;
  --leading-110: 1.1;
  --leading-120: 1.2;
  --leading-130: 1.3;
  --leading-150: 1.5;
  --leading-115: 1.15;
  --leading-100: 1;
  --leading-18: 18px;
  --leading-0-85rem: .85rem;
  --tracking-0-6: .6px;
}

/* 7. Spacing: 4px base. Values off the 4px grid keep their own token; rem values keep rem. */
:root {
  --container-width: 1428px;
  --section-spacing: 1;
  --section-padding-medium: 96px;
  --section-padding-small: 48px;
  --section-padding-large: 144px;
  --spacing-4: 4px;
  --spacing-5: 5px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-9: 9px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-15: 15px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-64: 64px;
  --spacing-100: 100px;
  --spacing-0-375rem: .375rem;
  --spacing-1rem: 1rem;
  --spacing-1-5rem: 1.5rem;
  --spacing-2rem: 2rem;
  --spacing-0-75rem: .75rem;
  --spacing-0-5rem: .5rem;
  --spacing-3rem: 3rem;
  --spacing-1-25rem: 1.25rem;
  --spacing-0-25rem: .25rem;
  --spacing-2-5rem: 2.5rem;
  --spacing-4rem: 4rem;
  --spacing-0-125rem: .125rem;
  --spacing-6rem: 6rem;
  --spacing-1-75rem: 1.75rem;
  --spacing-5rem: 5rem;
  --spacing-7-5rem: 7.5rem;
  --spacing-1-125rem: 1.125rem;
  --spacing-8rem: 8rem;
  --spacing-3-5rem: 3.5rem;
  --spacing-0-5625rem: .5625rem;
  --spacing-0-875rem: .875rem;
  --spacing-3-75rem: 3.75rem;
  --spacing-6-875rem: 6.875rem;
  --spacing-12rem: 12rem;
  --spacing-0-0625rem: .0625rem;
  --spacing-31-25rem: 31.25rem;
  --spacing-4-5rem: 4.5rem;
  --spacing-18-75rem: 18.75rem;
  --spacing-0-33em: .33em;
  --spacing-0-3rem: .3rem;
  --spacing-4-75rem: 4.75rem;
  --spacing-10rem: 10rem;
}

/* 7b. Breakpoint values for the role sizes, section paddings and other responsive tokens */
@media screen and (max-width: 767px) {
  :root {
    --size-h1: 2.5rem;
    --size-h2: 2rem;
    --size-h3: 1.5rem;
    --size-h4: 1.25rem;
    --size-h5: 1rem;
    --size-h6: .875rem;
    --size-body-large: 1.25rem;
  }
}
@media screen and (max-width: 479px) {
  :root {
    --section-padding-medium: 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: 12px;
  --radius-button: 12px;
  --radius-pill: var(--radius-button);
  --radius-2: calc(var(--radius-card) * 2 / 12);
  --radius-3: calc(var(--radius-card) * 3 / 12);
  --radius-8: calc(var(--radius-card) * 8 / 12);
  --radius-9: calc(var(--radius-card) * 9 / 12);
  --radius-0-25rem: calc(var(--radius-card) * 4 / 12);
  --radius-0-75rem: calc(var(--radius-card) * 12 / 12);
  --radius-0-125rem: calc(var(--radius-card) * 2 / 12);
  --radius-0-375rem: calc(var(--radius-card) * 6 / 12);
  --radius-0-875rem: calc(var(--radius-card) * 14 / 12);
}

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

/* 10. Shadows and focus */
:root,
[data-theme] {
  --shadow-1: 0 5px 25px var(--tone-overlay-a64);
  --shadow-2: 0 0 3px 1px var(--role-accent);
  --shadow-3: 0 0 .25rem 0 var(--role-accent);
  --shadow-4: 0 6px 1.25rem var(--tone-overlay-a8);
  --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 */