/* CaseWell design system: theme.css (palette, roles, themes and every token).
   Generated by _tools/design-system/generate.mjs from _tools/design-system/maps/casewell.mjs (with casewell.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-linen: #faf7f5;
  --color-paper: #fdfcfb;
  --color-sand: #f2ece9;
  --color-shell: #ebe5e2;
  --color-mist-line: #e3dddb;
  --color-clay-line: #dbd6d4;
  --color-taupe-line: #d4cfcd;
  --color-stone: #ebe9e5;
  --color-pebble-line: #c9c8c1;
  --color-tab-stone: #f3f1ed;
  --color-tab-plum: #302023;
  --color-check-navy: #000d14;
  --color-white: #ffffff;
  --color-charcoal: #2c2e29;
  --color-graphite: #292929;
  --color-night-ink: #1d1d1d;
  --color-menu-black: #000000;
  --color-menu-white: #ffffff;
  --color-clove: #827670;
  --color-jet: #000000;
  --color-espresso: #3e2a1f;
  --color-deep-espresso: #2e1f17;
  --color-error-ink: #3b0b0b;
  --color-error-wash: #f8e4e4;
}

/* 2. Colour roles: Original */
:root {
  --role-ink: var(--color-charcoal);
  --role-page: var(--color-linen);
  --role-surface: var(--color-sand);
  --role-accent: var(--color-espresso);
  --role-accent-deep: var(--color-deep-espresso);
  --role-line: var(--color-clay-line);
  --role-on-photo: var(--color-linen);
  --role-overlay: var(--color-espresso);
  --role-raised: var(--color-paper);
  --role-surface-2: var(--color-shell);
  --role-line-soft: var(--color-mist-line);
  --role-line-strong: var(--color-taupe-line);
  --role-surface-3: var(--color-stone);
  --role-line-deep: var(--color-pebble-line);
  --role-ink-soft: var(--color-graphite);
  --role-ink-deep: var(--color-night-ink);
  --role-ink-black: var(--color-menu-black);
  --role-panel: var(--color-menu-white);
  --role-tab: var(--color-tab-stone);
  --role-tab-line: var(--color-tab-plum);
  --role-ink-muted: var(--color-clove);
}

/* 3. Themes: each sets every role. Photo overlay stays dark in every theme. */
[data-theme="original"] {
  --role-ink: var(--color-charcoal);
  --role-page: var(--color-linen);
  --role-surface: var(--color-sand);
  --role-accent: var(--color-espresso);
  --role-accent-deep: var(--color-deep-espresso);
  --role-line: var(--color-clay-line);
  --role-on-photo: var(--color-linen);
  --role-overlay: var(--color-espresso);
  --role-raised: var(--color-paper);
  --role-surface-2: var(--color-shell);
  --role-line-soft: var(--color-mist-line);
  --role-line-strong: var(--color-taupe-line);
  --role-surface-3: var(--color-stone);
  --role-line-deep: var(--color-pebble-line);
  --role-ink-soft: var(--color-graphite);
  --role-ink-deep: var(--color-night-ink);
  --role-ink-black: var(--color-menu-black);
  --role-panel: var(--color-menu-white);
  --role-tab: var(--color-tab-stone);
  --role-tab-line: var(--color-tab-plum);
  --role-ink-muted: var(--color-clove);
}
[data-theme="chambers"] {
  color-scheme: light;
  --role-ink: #1c2129;
  --role-page: #f6f7f9;
  --role-surface: #eceff3;
  --role-accent: #1f3350;
  --role-accent-deep: #15243a;
  --role-line: #d5dbe3;
  --role-on-photo: #faf7f5;
  --role-overlay: #15243a;
  --role-raised: #fbfcfd;
  --role-surface-2: #e4e8ee;
  --role-line-soft: #dfe4ea;
  --role-line-strong: #ccd3dc;
  --role-surface-3: #e4e8ee;
  --role-line-deep: #ccd3dc;
  --role-ink-soft: #1c2129;
  --role-ink-deep: #1c2129;
  --role-ink-black: #1c2129;
  --role-panel: #ffffff;
  --role-tab: #eceff3;
  --role-tab-line: #1c2129;
  --role-ink-muted: #5b6573;
}
[data-theme="old-library"] {
  color-scheme: light;
  --role-ink: #1b1f1a;
  --role-page: #f7f5ee;
  --role-surface: #efebdf;
  --role-accent: #2c4a36;
  --role-accent-deep: #1f3527;
  --role-line: #dbd5c4;
  --role-on-photo: #faf7f5;
  --role-overlay: #1f3527;
  --role-raised: #fcfbf6;
  --role-surface-2: #e8e3d4;
  --role-line-soft: #e3ddcd;
  --role-line-strong: #d2cbb7;
  --role-surface-3: #e8e3d4;
  --role-line-deep: #d2cbb7;
  --role-ink-soft: #1b1f1a;
  --role-ink-deep: #1b1f1a;
  --role-ink-black: #1b1f1a;
  --role-panel: #ffffff;
  --role-tab: #efebdf;
  --role-tab-line: #1b1f1a;
  --role-ink-muted: #646150;
}
[data-theme="oxblood"] {
  color-scheme: light;
  --role-ink: #2a1a1c;
  --role-page: #faf5f4;
  --role-surface: #f3e9e7;
  --role-accent: #6b1f26;
  --role-accent-deep: #51161c;
  --role-line: #e2d3d0;
  --role-on-photo: #faf7f5;
  --role-overlay: #51161c;
  --role-raised: #fdfafa;
  --role-surface-2: #eee1de;
  --role-line-soft: #e9dcd9;
  --role-line-strong: #d9c7c3;
  --role-surface-3: #eee1de;
  --role-line-deep: #d9c7c3;
  --role-ink-soft: #2a1a1c;
  --role-ink-deep: #2a1a1c;
  --role-ink-black: #2a1a1c;
  --role-panel: #ffffff;
  --role-tab: #f3e9e7;
  --role-tab-line: #2a1a1c;
  --role-ink-muted: #77605d;
}
[data-theme="night-session"] {
  color-scheme: dark;
  --role-ink: #f3ece6;
  --role-page: #17110d;
  --role-surface: #211913;
  --role-accent: #d9b48f;
  --role-accent-deep: #e8cbae;
  --role-line: #3a2e26;
  --role-on-photo: #faf7f5;
  --role-overlay: #3e2a1f;
  --role-raised: #1d1611;
  --role-surface-2: #2a2019;
  --role-line-soft: #32271f;
  --role-line-strong: #44372d;
  --role-surface-3: #2a2019;
  --role-line-deep: #44372d;
  --role-ink-soft: #f3ece6;
  --role-ink-deep: #f3ece6;
  --role-ink-black: #ffffff;
  --role-panel: #1d1611;
  --role-tab: #211913;
  --role-tab-line: #f3ece6;
  --role-ink-muted: #b7a79c;
}
[data-theme="inverted"] {
  color-scheme: dark;
  --role-ink: #faf7f5;
  --role-page: #1c1d1a;
  --role-surface: #262723;
  --role-accent: #d8c3b4;
  --role-accent-deep: #e8d9ce;
  --role-line: #3a3b36;
  --role-on-photo: #faf7f5;
  --role-overlay: #3e2a1f;
  --role-raised: #222320;
  --role-surface-2: #2e2f2a;
  --role-line-soft: #33342f;
  --role-line-strong: #45463f;
  --role-surface-3: #2e2f2a;
  --role-line-deep: #45463f;
  --role-ink-soft: #faf7f5;
  --role-ink-deep: #faf7f5;
  --role-ink-black: #ffffff;
  --role-panel: #222320;
  --role-tab: #262723;
  --role-tab-line: #faf7f5;
  --role-ink-muted: #b0a7a1;
}

/* 4. Derived colours: worked out from roles with color-mix, never stored */
:root,
[data-theme] {
  --tone-accent-81-ink-muted: color-mix(in srgb, var(--role-accent) 81%, var(--role-ink-muted));
  --tone-panel-16: rgb(from var(--role-panel) r g b / 16%);
  --tone-panel-84-ink-soft: color-mix(in srgb, var(--role-panel) 84%, var(--role-ink-soft));
  --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-ink-black-12: rgb(from var(--role-ink-black) r g b / 12%);
  --tone-page-20: rgb(from var(--role-page) r g b / 20%);
  --tone-on-photo-20: rgb(from var(--role-on-photo) r g b / 20%);
  --tone-surface-2-a179: rgb(from var(--role-surface-2) r g b / calc(179 / 255));
  --tone-accent-a179: rgb(from var(--role-accent) r g b / calc(179 / 255));
  --tone-panel-76-ink-soft: color-mix(in srgb, var(--role-panel) 76%, var(--role-ink-soft));
  --tone-ink-deep-55-ink-soft: color-mix(in srgb, var(--role-ink-deep) 55%, var(--role-ink-soft));
  --tone-jet-20: rgb(from var(--color-jet) r g b / 20%);
  --tone-ink-soft-95-1-panel: color-mix(in srgb, var(--role-ink-soft) 95.1%, var(--role-panel));
  --tone-panel-89-line-strong: color-mix(in srgb, var(--role-panel) 89%, var(--role-line-strong));
  --tone-panel-74-1-ink-soft: color-mix(in srgb, var(--role-panel) 74.1%, var(--role-ink-soft));
  --tone-ink-black-60: rgb(from var(--role-ink-black) r g b / 60%);
  --tone-panel-94-ink-soft: color-mix(in srgb, var(--role-panel) 94%, var(--role-ink-soft));
  --tone-panel-52-2-ink-soft: color-mix(in srgb, var(--role-panel) 52.2%, var(--role-ink-soft));
  --tone-ink-black-40: rgb(from var(--role-ink-black) r g b / 40%);
  --tone-panel-92-ink-soft: color-mix(in srgb, var(--role-panel) 92%, var(--role-ink-soft));
  --tone-panel-83-ink-deep: color-mix(in srgb, var(--role-panel) 83%, var(--role-ink-deep));
  --tone-ink-black-a13: rgb(from var(--role-ink-black) r g b / calc(13 / 255));
  --tone-panel-a26: rgb(from var(--role-panel) r g b / calc(26 / 255));
  --tone-panel-91-4-ink-soft: color-mix(in srgb, var(--role-panel) 91.4%, var(--role-ink-soft));
  --tone-panel-58-2-ink-soft: color-mix(in srgb, var(--role-panel) 58.2%, var(--role-ink-soft));
  --tone-page-60: rgb(from var(--role-page) r g b / 60%);
  --tone-page-86-7-ink-soft: color-mix(in srgb, var(--role-page) 86.7%, var(--role-ink-soft));
  --tone-jet-a64: rgb(from var(--color-jet) r g b / calc(64 / 255));
  --tone-page-26-check-navy-45-panel: color-mix(in srgb, color-mix(in srgb, var(--role-page) 26%, var(--color-check-navy)) 45%, var(--role-panel));
  --tone-panel-86-3-ink-soft: color-mix(in srgb, var(--role-panel) 86.3%, var(--role-ink-soft));
  --tone-panel-94-2-ink-soft: color-mix(in srgb, var(--role-panel) 94.2%, var(--role-ink-soft));
  --tone-ink-deep-55-ink-soft-40: rgb(from color-mix(in srgb, var(--role-ink-deep) 55%, var(--role-ink-soft)) r g b / 40%);
  --tone-panel-40: rgb(from var(--role-panel) r g b / 40%);
  --tone-ink-black-90: rgb(from var(--role-ink-black) r g b / 90%);
  --tone-jet-a8: rgb(from var(--color-jet) r g b / calc(8 / 255));
  --tone-jet-a18: rgb(from var(--color-jet) r g b / calc(18 / 255));
  --tone-jet-a15: rgb(from var(--color-jet) r g b / calc(15 / 255));
  --tone-line-deep-38-panel-65-tab: color-mix(in srgb, color-mix(in srgb, var(--role-line-deep) 38%, var(--role-panel)) 65%, var(--role-tab));
  --tone-line-soft-87-5-ink-soft: color-mix(in srgb, var(--role-line-soft) 87.5%, var(--role-ink-soft));
  --tone-surface-75-ink-deep: color-mix(in srgb, var(--role-surface) 75%, var(--role-ink-deep));
  --tone-surface-74-6-ink-black: color-mix(in srgb, var(--role-surface) 74.6%, var(--role-ink-black));
  --tone-surface-65-5-ink-soft: color-mix(in srgb, var(--role-surface) 65.5%, var(--role-ink-soft));
  --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) */
.home1_hero_right,
.home1_principles_card,
.home1_blog_card,
.section_contact3_contact,
.insight_hero_wrap,
.section_home2_hero,
.home3_quote_wrap,
.home2_principles_card-accent,
.section_areas3_hero {
  --role-page: var(--role-on-photo);
  --button-primary-text: var(--role-page-outer);
  --tone-page-20: rgb(from var(--role-page) r g b / 20%);
  --tone-page-60: rgb(from var(--role-page) r g b / 60%);
  --tone-page-86-7-ink-soft: color-mix(in srgb, var(--role-page) 86.7%, var(--role-ink-soft));
  --tone-page-26-check-navy-45-panel: color-mix(in srgb, color-mix(in srgb, var(--role-page) 26%, var(--color-check-navy)) 45%, var(--role-panel));
}
:root,
[data-theme] {
  --role-page-outer: var(--role-page);
}
.home1_hero_right :is(input, select, textarea),
.home1_principles_card :is(input, select, textarea),
.home1_blog_card :is(input, select, textarea),
.section_contact3_contact :is(input, select, textarea),
.insight_hero_wrap :is(input, select, textarea),
.section_home2_hero :is(input, select, textarea),
.home3_quote_wrap :is(input, select, textarea),
.home2_principles_card-accent :is(input, select, textarea),
.section_areas3_hero :is(input, select, textarea) {
  --role-page: var(--role-page-outer);
}

/* 5. Fonts */
:root {
  --font-heading: Sourceserif-4-Variable, Arial, sans-serif;
  --font-body: Geist, sans-serif;
  --font-label: "Geist Mono", monospace;
}

/* 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-h5: 1.5rem;
  --size-h6: 1.125rem;
  --size-body-regular: 1rem;
  --size-body-small: 1.05rem;
  --size-body-large: 1.25rem;
  --size-body-tiny: 1rem;
  --size-body-medium: 1.125rem;
  --size-badge: 1rem;
  --size-button-normal: 1rem;
  --size-button-small: 1rem;
  --size-1rem: 1rem;
  --size-0-875rem: .875rem;
  --size-1-25rem: 1.25rem;
  --size-2-5rem: 2.5rem;
  --size-12: 12px;
  --size-0-75rem: .75rem;
  --size-2-8rem: 2.8rem;
  --leading-body-small: 150%;
  --leading-h1: 110%;
  --leading-h2: 115%;
  --leading-h3: 120%;
  --leading-h4: 120%;
  --leading-h5: 130%;
  --leading-h6: 130%;
  --leading-body-large: 150%;
  --leading-body-tiny: 150%;
  --leading-body-medium: 150%;
  --leading-badge: 140%;
  --leading-button-normal: 150%;
  --leading-button-small: 150%;
  --leading-140: 1.4;
  --leading-150: 1.5;
  --leading-100: 1;
  --tracking-0-6: .6px;
  --tracking-0-4: .4px;
}

/* 7. Spacing: 4px base. Values off the 4px grid keep their own token; rem values keep rem. */
:root {
  --container-width: 1400px;
  --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-10: 10px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-96: 96px;
  --spacing-1-5rem: 1.5rem;
  --spacing-1rem: 1rem;
  --spacing-2rem: 2rem;
  --spacing-3rem: 3rem;
  --spacing-0-75rem: .75rem;
  --spacing-1-25rem: 1.25rem;
  --spacing-0-5rem: .5rem;
  --spacing-4rem: 4rem;
  --spacing-6rem: 6rem;
  --spacing-2-5rem: 2.5rem;
  --spacing-0-375rem: .375rem;
  --spacing-0-25rem: .25rem;
  --spacing-3-75rem: 3.75rem;
  --spacing-5rem: 5rem;
  --spacing-8rem: 8rem;
  --spacing-3-5rem: 3.5rem;
  --spacing-0-125rem: .125rem;
  --spacing-1-75rem: 1.75rem;
  --spacing-0-5625rem: .5625rem;
  --spacing-12rem: 12rem;
  --spacing-1-125rem: 1.125rem;
  --spacing-0-0625rem: .0625rem;
  --spacing-1-875rem: 1.875rem;
  --spacing-7rem: 7rem;
  --spacing-4-5rem: 4.5rem;
  --spacing-0-875rem: .875rem;
  --spacing-0-3rem: .3rem;
  --spacing-1-4rem: 1.4rem;
  --spacing-3-625rem: 3.625rem;
  --spacing-7-5rem: 7.5rem;
  --spacing-4-75rem: 4.75rem;
  --spacing-6-25rem: 6.25rem;
  --spacing-0-6rem: .6rem;
  --spacing-10rem: 10rem;
  --spacing-4-25rem: 4.25rem;
  --spacing-2-75rem: 2.75rem;
  --spacing-5-25rem: 5.25rem;
}

/* 7b. Breakpoint values for the role sizes, section paddings and other responsive tokens */
@media screen and (max-width: 991px) {
  :root {
    --section-padding-medium: 84px;
    --section-padding-large: 128px;
    --section-padding-small: 44px;
  }
}
@media screen and (max-width: 767px) {
  :root {
    --size-h1: 2.625rem;
    --size-h2: 1.875rem;
    --size-h3: 1.5rem;
    --size-h4: 1.3125rem;
    --size-h5: 1.125rem;
    --size-h6: 1rem;
    --size-body-small: 1rem;
    --size-body-large: 1.125rem;
    --size-body-medium: 1.1rem;
    --section-padding-medium: 72px;
    --section-padding-large: 112px;
    --section-padding-small: 40px;
  }
}
@media screen and (max-width: 479px) {
  :root {
    --size-h1: 2.625rem;
    --size-h2: 1.875rem;
    --size-h3: 1.5rem;
    --size-h4: 1.3125rem;
    --size-h5: 1.125rem;
    --size-h6: 1rem;
    --size-body-small: 1rem;
    --size-body-large: 1.125rem;
    --size-body-medium: 1.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: 12px;
  --radius-button: 50px;
  --radius-pill: var(--radius-button);
  --radius-2: calc(var(--radius-card) * 2 / 12);
  --radius-6: calc(var(--radius-card) * 6 / 12);
  --radius-8: calc(var(--radius-card) * 8 / 12);
  --radius-50: calc(var(--radius-card) * 50 / 12);
  --radius-60: calc(var(--radius-card) * 60 / 12);
  --radius-99: calc(var(--radius-card) * 99 / 12);
  --radius-0-75rem: calc(var(--radius-card) * 12 / 12);
  --radius-0-125rem: calc(var(--radius-card) * 2 / 12);
  --radius-0-25rem: calc(var(--radius-card) * 4 / 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-page);
  --button-secondary-bg: var(--role-surface-2);
  --button-secondary-text: var(--role-ink);
  --button-secondary-bg-hover: var(--role-line-strong);
}

/* 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-a26), 0 40px 40px var(--tone-jet-a8);
  --shadow-4: 0 16px 36px var(--tone-jet-a18), 0 40px 40px var(--tone-jet-a8);
  --shadow-5: 0 8px 18px var(--tone-jet-a15), 0 20px 20px var(--tone-jet-a8);
  --focus-ring: var(--role-accent);
}

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