/* PaxOnBoard design tokens. GENERATED by tools/design_tokens.py: edit the recipe there, not this file.
   One file for the desk, the hosted booking page, the widget and print. Screens use these names and never a
   colour, size or duration literal (docs/design-standards.md). A theme is chosen by data-theme on <html>:
   light, dark, light-aqua, medium-aqua. No attribute, or "system", follows the browser (light or dark).
   Every colour pair in tools/design_tokens.py PAIRS is checked for WCAG AA in tests/test_design_standards.py. */

:root {
  /* Type. Inter (bundled in ui/design/fonts/, loaded by the kit) leads once its @font-face is added; this system stack is the fallback and covers Latin, CJK, Arabic, Thai and Devanagari offline. */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --fs-2xs: 0.6875rem;   /* 11px: tiny caps labels only, never body text */
  --fs-xs: 0.75rem;      /* 12px: chips, table meta */
  --fs-sm: 0.875rem;     /* 14px: help text, secondary rows */
  --fs-md: 1rem;         /* 16px: body, inputs (16px stops phones zooming into fields) */
  --fs-lg: 1.125rem;     /* 18px: lead text, card titles */
  --fs-xl: 1.25rem;      /* 20px: section headings (h3) */
  --fs-2xl: clamp(1.5rem, 1.35rem + 0.6vw, 1.75rem);    /* h2 */
  --fs-3xl: clamp(1.875rem, 1.6rem + 1.2vw, 2.375rem);  /* page title (h1) */
  --fs-display: clamp(2.5rem, 2rem + 2.2vw, 3.5rem);    /* hero numbers on stat tiles */
  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-body: 1.55;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --ls-tight: -0.015em;  /* headings */
  --ls-caps: 0.06em;     /* small uppercase labels */

  /* Space: a 4px grid in rem, so it scales with the person's zoom. Generous by default. */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --gutter: clamp(1rem, 2.5vw, 2rem);  /* page side padding: 16px on a phone, 32px on a desk */
  --content-max: 80rem;                /* 1280px: the widest a page body grows */
  --form-max: 44rem;                   /* 704px: a form is never wider than this */
  --prose-max: 70ch;                   /* a line of reading text */

  /* Shape */
  --r-xs: 0.25rem;
  --r-sm: 0.5rem;
  --r-md: 0.75rem;
  --r-lg: 1rem;      /* cards */
  --r-xl: 1.5rem;    /* dialogs, sheets */
  --r-pill: 999px;   /* chips, switches, pill tabs */
  --r-control: 0.625rem;  /* 10px: buttons and inputs */

  /* Control sizes. Comfortable on a desk; (pointer: coarse) below raises them to 44px for fingers. */
  --control-h: 2.5rem;
  --control-h-sm: 2rem;
  --control-h-lg: 3rem;
  --row-h: 3rem;
  --icon: 1.25rem;       /* 20px: the icon size inside controls and rows */
  --icon-sm: 1rem;
  --icon-lg: 1.5rem;

  /* Depth. Shadows are tinted with the theme's ink (--shadow-rgb), never flat black on light themes. */
  --shadow-1: 0 1px 2px rgb(var(--shadow-rgb) / 0.06), 0 1px 3px rgb(var(--shadow-rgb) / 0.10);
  --shadow-2: 0 4px 12px -2px rgb(var(--shadow-rgb) / 0.14), 0 2px 4px rgb(var(--shadow-rgb) / 0.06);
  --shadow-3: 0 16px 40px -12px rgb(var(--shadow-rgb) / 0.30), 0 4px 12px rgb(var(--shadow-rgb) / 0.08);

  /* Focus ring: 2px of --focus, 2px off the control, on every focusable thing (3:1 against bg and surface). */
  --focus-w: 2px;
  --focus-offset: 2px;

  /* Motion: quiet. Small things move fast, sheets and dialogs a little slower. */
  --dur-1: 120ms;
  --dur-2: 200ms;
  --dur-3: 320ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.2, 1);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Layers */
  --z-sticky: 10;
  --z-dropdown: 100;
  --z-drawer: 200;
  --z-dialog: 300;
  --z-toast: 400;
  --z-tooltip: 500;
}

:root,
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f7fa;  /* the page canvas */
  --surface: #ffffff;  /* cards, inputs, panels, table bodies */
  --surface-2: #ebf1f5;  /* table headers, alternate rows, wells */
  --surface-3: #dfe8ed;  /* pressed and hovered neutrals, segmented-control tracks */
  --surface-inverse: #152631;  /* tooltips, keyboard hints */
  --fg-inverse: #f2f6f8;  /* text on surface-inverse */
  --fg: #142935;  /* text */
  --muted: #536672;  /* secondary text, labels, icons at rest */
  --hint: #64747e;  /* placeholders and hints, on surfaces only */
  --line: #d8dfe4;  /* hairline dividers (decorative, no contrast rule) */
  --border: #7e8b94;  /* control outlines (3:1 against surface and bg) */
  --border-strong: #536672;  /* outlined buttons, emphasised edges */
  --accent: #02787d;  /* primary actions, links, selected states (the brand aqua) */
  --accent-fg: #ffffff;  /* text and icons on accent */
  --accent-hover: #00686c;  /* accent on hover */
  --accent-active: #04585c;  /* accent while pressed */
  --accent-soft: #d8f5f6;  /* tinted fills: selected rows, tonal buttons, active tabs */
  --accent-text: #035e63;  /* links and accent-coloured text on any surface (4.5:1) */
  --pop: #e86a34;  /* the warm highlight: badges that must be seen, the one call-out per screen */
  --pop-fg: #2f1810;  /* text on pop (always dark ink) */
  --pop-hover: #f67742;  /* pop on hover */
  --pop-soft: #feeae2;  /* pop tint for chips and call-out panels */
  --pop-text: #9d3901;  /* pop as text, on surfaces and pop-soft */
  --ok: #21763c;  /* success as text or a fill (confirmed, paid, in) */
  --ok-soft: #dcf7e1;  /* success tint */
  --ok-text: #0b5d2a;  /* text on ok-soft */
  --warn: #835a01;  /* attention as text or a fill (held, due, unpaid) */
  --warn-soft: #fff0d9;  /* attention tint */
  --warn-text: #755000;  /* text on warn-soft */
  --bad: #af2938;  /* problems as text or a fill (cancelled, failed, over) */
  --bad-fg: #ffffff;  /* text on bad (danger buttons) */
  --bad-soft: #fee9e8;  /* problem tint */
  --bad-text: #9a1c2e;  /* text on bad-soft */
  --info: #1364b0;  /* neutral notice (web booking, note) */
  --info-soft: #e3f0ff;  /* notice tint */
  --info-text: #08569a;  /* text on info-soft */
  --focus: #0c72cb;  /* the keyboard focus ring */
  --selection: #afebee;  /* selected text and chosen calendar ranges */
  --row-hover: #e9f7f7;  /* a table or list row under the pointer */
  --scrim: rgb(16 24 40 / 0.45);  /* behind dialogs and sheets */
  --shadow-rgb: 20 32 56;  /* the ink the shadows are mixed from */
  --sheen: rgb(255 255 255 / 0.5);  /* the soft top light on gradient cards */
  --grad-accent: linear-gradient(135deg, #047f7c 0%, #01606e 100%);  /* primary buttons, the app bar line, hero cards */
  --grad-pop: linear-gradient(135deg, #fa934e 0%, #ea6744 100%);  /* the highlight button and call-outs */
  --grad-hero: linear-gradient(160deg, #e7f9fe 0%, #c2f3f5 55%, #feeadb 100%);  /* sign-in and page-header backgrounds (text on it uses --fg) */
  /* Charts: categorical series in this fixed order (aqua, coral, violet, sun, sky, leaf); one-hue sequential
     steps light to dark; a diverging pair (negative, neutral middle, positive). See docs/design-standards.md 2.7. */
  --chart-1: #029393;
  --chart-2: #d05418;
  --chart-3: #6e3ead;
  --chart-4: #b78006;
  --chart-5: #0064b5;
  --chart-6: #429c5a;
  --chart-seq-1: #d5f2f3;
  --chart-seq-2: #93d9dc;
  --chart-seq-3: #40b1b7;
  --chart-seq-4: #07858a;
  --chart-seq-5: #04585c;
  --chart-neg: #d05418;
  --chart-mid: #d1d1d1;
  --chart-pos: #07858a;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #061118;  /* the page canvas */
  --surface: #0f1d25;  /* cards, inputs, panels, table bodies */
  --surface-2: #17262f;  /* table headers, alternate rows, wells */
  --surface-3: #1f303b;  /* pressed and hovered neutrals, segmented-control tracks */
  --surface-inverse: #e8f0f4;  /* tooltips, keyboard hints */
  --fg-inverse: #0b1d27;  /* text on surface-inverse */
  --fg: #e8f0f4;  /* text */
  --muted: #a5b3bc;  /* secondary text, labels, icons at rest */
  --hint: #87949d;  /* placeholders and hints, on surfaces only */
  --line: #24333b;  /* hairline dividers (decorative, no contrast rule) */
  --border: #5e6b73;  /* control outlines (3:1 against surface and bg) */
  --border-strong: #87949d;  /* outlined buttons, emphasised edges */
  --accent: #4eccd3;  /* primary actions, links, selected states (the brand aqua) */
  --accent-fg: #001315;  /* text and icons on accent */
  --accent-hover: #6fdbe1;  /* accent on hover */
  --accent-active: #35b9c0;  /* accent while pressed */
  --accent-soft: #003032;  /* tinted fills: selected rows, tonal buttons, active tabs */
  --accent-text: #6bd8de;  /* links and accent-coloured text on any surface (4.5:1) */
  --pop: #fc8b5d;  /* the warm highlight: badges that must be seen, the one call-out per screen */
  --pop-fg: #2a140b;  /* text on pop (always dark ink) */
  --pop-hover: #ffa37f;  /* pop on hover */
  --pop-soft: #442012;  /* pop tint for chips and call-out panels */
  --pop-text: #ffad8d;  /* pop as text, on surfaces and pop-soft */
  --ok: #68ca80;  /* success as text or a fill (confirmed, paid, in) */
  --ok-soft: #122d19;  /* success tint */
  --ok-text: #83dc97;  /* text on ok-soft */
  --warn: #efb146;  /* attention as text or a fill (held, due, unpaid) */
  --warn-soft: #362508;  /* attention tint */
  --warn-text: #fcc364;  /* text on warn-soft */
  --bad: #fb8083;  /* problems as text or a fill (cancelled, failed, over) */
  --bad-fg: #250e0e;  /* text on bad (danger buttons) */
  --bad-soft: #421b1c;  /* problem tint */
  --bad-text: #feaaa9;  /* text on bad-soft */
  --info: #77b5fb;  /* neutral notice (web booking, note) */
  --info-soft: #152a41;  /* notice tint */
  --info-text: #99c8ff;  /* text on info-soft */
  --focus: #73b5ff;  /* the keyboard focus ring */
  --selection: #034649;  /* selected text and chosen calendar ranges */
  --row-hover: #0e2627;  /* a table or list row under the pointer */
  --scrim: rgb(4 8 18 / 0.6);  /* behind dialogs and sheets */
  --shadow-rgb: 0 0 0;  /* the ink the shadows are mixed from */
  --sheen: rgb(255 255 255 / 0.06);  /* the soft top light on gradient cards */
  --grad-accent: linear-gradient(135deg, #60dbd4 0%, #10b1ca 100%);  /* primary buttons, the app bar line, hero cards */
  --grad-pop: linear-gradient(135deg, #feb079 0%, #f6825f 100%);  /* the highlight button and call-outs */
  --grad-hero: linear-gradient(160deg, #001f26 0%, #002a2c 55%, #1f1b35 100%);  /* sign-in and page-header backgrounds (text on it uses --fg) */
  /* Charts: categorical series in this fixed order (aqua, coral, violet, sun, sky, leaf); one-hue sequential
     steps light to dark; a diverging pair (negative, neutral middle, positive). See docs/design-standards.md 2.7. */
  --chart-1: #09a0a0;
  --chart-2: #ce6234;
  --chart-3: #8864c0;
  --chart-4: #bf8608;
  --chart-5: #4683c5;
  --chart-6: #399d57;
  --chart-seq-1: #023538;
  --chart-seq-2: #04585c;
  --chart-seq-3: #07858a;
  --chart-seq-4: #2bb3b9;
  --chart-seq-5: #7edde2;
  --chart-neg: #fc8b5d;
  --chart-mid: #555555;
  --chart-pos: #4eccd3;
}

:root[data-theme="light-aqua"] {
  color-scheme: light;
  --bg: #d6f8f9;  /* the page canvas */
  --surface: #f4fdfe;  /* cards, inputs, panels, table bodies */
  --surface-2: #d7f3f5;  /* table headers, alternate rows, wells */
  --surface-3: #c5eced;  /* pressed and hovered neutrals, segmented-control tracks */
  --surface-inverse: #012f36;  /* tooltips, keyboard hints */
  --fg-inverse: #eef7f8;  /* text on surface-inverse */
  --fg: #032c33;  /* text */
  --muted: #3b6268;  /* secondary text, labels, icons at rest */
  --hint: #507377;  /* placeholders and hints, on surfaces only */
  --line: #b7dddf;  /* hairline dividers (decorative, no contrast rule) */
  --border: #5c8a8c;  /* control outlines (3:1 against surface and bg) */
  --border-strong: #366366;  /* outlined buttons, emphasised edges */
  --accent: #057176;  /* primary actions, links, selected states (the brand aqua) */
  --accent-fg: #ffffff;  /* text and icons on accent */
  --accent-hover: #026266;  /* accent on hover */
  --accent-active: #005256;  /* accent while pressed */
  --accent-soft: #bfeff2;  /* tinted fills: selected rows, tonal buttons, active tabs */
  --accent-text: #04585c;  /* links and accent-coloured text on any surface (4.5:1) */
  --pop: #e86a34;  /* the warm highlight: badges that must be seen, the one call-out per screen */
  --pop-fg: #2f1810;  /* text on pop (always dark ink) */
  --pop-hover: #f67742;  /* pop on hover */
  --pop-soft: #fee5dc;  /* pop tint for chips and call-out panels */
  --pop-text: #993700;  /* pop as text, on surfaces and pop-soft */
  --ok: #1d7339;  /* success as text or a fill (confirmed, paid, in) */
  --ok-soft: #d5f5da;  /* success tint */
  --ok-text: #065a27;  /* text on ok-soft */
  --warn: #805800;  /* attention as text or a fill (held, due, unpaid) */
  --warn-soft: #feecd0;  /* attention tint */
  --warn-text: #714d00;  /* text on warn-soft */
  --bad: #ac2536;  /* problems as text or a fill (cancelled, failed, over) */
  --bad-fg: #ffffff;  /* text on bad (danger buttons) */
  --bad-soft: #fee4e3;  /* problem tint */
  --bad-text: #97182b;  /* text on bad-soft */
  --info: #0d61ac;  /* neutral notice (web booking, note) */
  --info-soft: #deedfe;  /* notice tint */
  --info-text: #035397;  /* text on info-soft */
  --focus: #0069bf;  /* the keyboard focus ring */
  --selection: #9de3e6;  /* selected text and chosen calendar ranges */
  --row-hover: #d8f5f6;  /* a table or list row under the pointer */
  --scrim: rgb(8 40 46 / 0.45);  /* behind dialogs and sheets */
  --shadow-rgb: 10 60 68;  /* the ink the shadows are mixed from */
  --sheen: rgb(255 255 255 / 0.55);  /* the soft top light on gradient cards */
  --grad-accent: linear-gradient(135deg, #057c79 0%, #035a67 100%);  /* primary buttons, the app bar line, hero cards */
  --grad-pop: linear-gradient(135deg, #fa934e 0%, #ea6744 100%);  /* the highlight button and call-outs */
  --grad-hero: linear-gradient(160deg, #dcf7ff 0%, #a7edec 55%, #feeadb 100%);  /* sign-in and page-header backgrounds (text on it uses --fg) */
  /* Charts: categorical series in this fixed order (aqua, coral, violet, sun, sky, leaf); one-hue sequential
     steps light to dark; a diverging pair (negative, neutral middle, positive). See docs/design-standards.md 2.7. */
  --chart-1: #079390;
  --chart-2: #d05418;
  --chart-3: #6e3ead;
  --chart-4: #b78006;
  --chart-5: #0064b5;
  --chart-6: #429c5a;
  --chart-seq-1: #c7edef;
  --chart-seq-2: #83d4d8;
  --chart-seq-3: #38abb1;
  --chart-seq-4: #007e84;
  --chart-seq-5: #005256;
  --chart-neg: #d05418;
  --chart-mid: #cacaca;
  --chart-pos: #007e84;
}

:root[data-theme="medium-aqua"] {
  color-scheme: light;
  --bg: #77cfd3;  /* the page canvas */
  --surface: #def6f7;  /* cards, inputs, panels, table bodies */
  --surface-2: #bee9eb;  /* table headers, alternate rows, wells */
  --surface-3: #a4dfe2;  /* pressed and hovered neutrals, segmented-control tracks */
  --surface-inverse: #00272d;  /* tooltips, keyboard hints */
  --fg-inverse: #eef7f8;  /* text on surface-inverse */
  --fg: #00242b;  /* text */
  --muted: #28555b;  /* secondary text, labels, icons at rest */
  --hint: #436b6f;  /* placeholders and hints, on surfaces only */
  --line: #92c2c4;  /* hairline dividers (decorative, no contrast rule) */
  --border: #356e71;  /* control outlines (3:1 against surface and bg) */
  --border-strong: #1b575a;  /* outlined buttons, emphasised edges */
  --accent: #005860;  /* primary actions, links, selected states (the brand aqua) */
  --accent-fg: #ffffff;  /* text and icons on accent */
  --accent-hover: #03494f;  /* accent on hover */
  --accent-active: #013b40;  /* accent while pressed */
  --accent-soft: #a9e4e7;  /* tinted fills: selected rows, tonal buttons, active tabs */
  --accent-text: #00464d;  /* links and accent-coloured text on any surface (4.5:1) */
  --pop: #d75a21;  /* the warm highlight: badges that must be seen, the one call-out per screen */
  --pop-fg: #250f07;  /* text on pop (always dark ink) */
  --pop-hover: #e56731;  /* pop on hover */
  --pop-soft: #fee1d6;  /* pop tint for chips and call-out panels */
  --pop-text: #8b3201;  /* pop as text, on surfaces and pop-soft */
  --ok: #005725;  /* success as text or a fill (confirmed, paid, in) */
  --ok-soft: #ceefd3;  /* success tint */
  --ok-text: #015122;  /* text on ok-soft */
  --warn: #674600;  /* attention as text or a fill (held, due, unpaid) */
  --warn-soft: #ffe8c5;  /* attention tint */
  --warn-text: #674600;  /* text on warn-soft */
  --bad: #9b0c28;  /* problems as text or a fill (cancelled, failed, over) */
  --bad-fg: #ffffff;  /* text on bad (danger buttons) */
  --bad-soft: #ffdfde;  /* problem tint */
  --bad-text: #8d0723;  /* text on bad-soft */
  --info: #014b8a;  /* neutral notice (web booking, note) */
  --info-soft: #daeafc;  /* notice tint */
  --info-text: #004885;  /* text on info-soft */
  --focus: #004d8f;  /* the keyboard focus ring */
  --selection: #83d4d8;  /* selected text and chosen calendar ranges */
  --row-hover: #cbecee;  /* a table or list row under the pointer */
  --scrim: rgb(6 36 42 / 0.5);  /* behind dialogs and sheets */
  --shadow-rgb: 8 50 58;  /* the ink the shadows are mixed from */
  --sheen: rgb(255 255 255 / 0.6);  /* the soft top light on gradient cards */
  --grad-accent: linear-gradient(135deg, #026c69 0%, #024550 100%);  /* primary buttons, the app bar line, hero cards */
  --grad-pop: linear-gradient(135deg, #ef8f51 0%, #db6241 100%);  /* the highlight button and call-outs */
  --grad-hero: linear-gradient(160deg, #95d7e7 0%, #57c5c5 55%, #f4c7a3 100%);  /* sign-in and page-header backgrounds (text on it uses --fg) */
  /* Charts: categorical series in this fixed order (aqua, coral, violet, sun, sky, leaf); one-hue sequential
     steps light to dark; a diverging pair (negative, neutral middle, positive). See docs/design-standards.md 2.7. */
  --chart-1: #018d82;
  --chart-2: #af4002;
  --chart-3: #6331a0;
  --chart-4: #a17003;
  --chart-5: #005398;
  --chart-6: #1d7d3e;
  --chart-seq-1: #c0e7e8;
  --chart-seq-2: #64c3c8;
  --chart-seq-3: #1c989e;
  --chart-seq-4: #076b6f;
  --chart-seq-5: #004144;
  --chart-neg: #c14802;
  --chart-mid: #808080;
  --chart-pos: #04585c;
}

/* No choice made, or "system": follow the browser. Repeats the dark tokens exactly (the test checks). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]),
  :root[data-theme="system"] {
    color-scheme: dark;
    --bg: #061118;  /* the page canvas */
    --surface: #0f1d25;  /* cards, inputs, panels, table bodies */
    --surface-2: #17262f;  /* table headers, alternate rows, wells */
    --surface-3: #1f303b;  /* pressed and hovered neutrals, segmented-control tracks */
    --surface-inverse: #e8f0f4;  /* tooltips, keyboard hints */
    --fg-inverse: #0b1d27;  /* text on surface-inverse */
    --fg: #e8f0f4;  /* text */
    --muted: #a5b3bc;  /* secondary text, labels, icons at rest */
    --hint: #87949d;  /* placeholders and hints, on surfaces only */
    --line: #24333b;  /* hairline dividers (decorative, no contrast rule) */
    --border: #5e6b73;  /* control outlines (3:1 against surface and bg) */
    --border-strong: #87949d;  /* outlined buttons, emphasised edges */
    --accent: #4eccd3;  /* primary actions, links, selected states (the brand aqua) */
    --accent-fg: #001315;  /* text and icons on accent */
    --accent-hover: #6fdbe1;  /* accent on hover */
    --accent-active: #35b9c0;  /* accent while pressed */
    --accent-soft: #003032;  /* tinted fills: selected rows, tonal buttons, active tabs */
    --accent-text: #6bd8de;  /* links and accent-coloured text on any surface (4.5:1) */
    --pop: #fc8b5d;  /* the warm highlight: badges that must be seen, the one call-out per screen */
    --pop-fg: #2a140b;  /* text on pop (always dark ink) */
    --pop-hover: #ffa37f;  /* pop on hover */
    --pop-soft: #442012;  /* pop tint for chips and call-out panels */
    --pop-text: #ffad8d;  /* pop as text, on surfaces and pop-soft */
    --ok: #68ca80;  /* success as text or a fill (confirmed, paid, in) */
    --ok-soft: #122d19;  /* success tint */
    --ok-text: #83dc97;  /* text on ok-soft */
    --warn: #efb146;  /* attention as text or a fill (held, due, unpaid) */
    --warn-soft: #362508;  /* attention tint */
    --warn-text: #fcc364;  /* text on warn-soft */
    --bad: #fb8083;  /* problems as text or a fill (cancelled, failed, over) */
    --bad-fg: #250e0e;  /* text on bad (danger buttons) */
    --bad-soft: #421b1c;  /* problem tint */
    --bad-text: #feaaa9;  /* text on bad-soft */
    --info: #77b5fb;  /* neutral notice (web booking, note) */
    --info-soft: #152a41;  /* notice tint */
    --info-text: #99c8ff;  /* text on info-soft */
    --focus: #73b5ff;  /* the keyboard focus ring */
    --selection: #034649;  /* selected text and chosen calendar ranges */
    --row-hover: #0e2627;  /* a table or list row under the pointer */
    --scrim: rgb(4 8 18 / 0.6);  /* behind dialogs and sheets */
    --shadow-rgb: 0 0 0;  /* the ink the shadows are mixed from */
    --sheen: rgb(255 255 255 / 0.06);  /* the soft top light on gradient cards */
    --grad-accent: linear-gradient(135deg, #60dbd4 0%, #10b1ca 100%);  /* primary buttons, the app bar line, hero cards */
    --grad-pop: linear-gradient(135deg, #feb079 0%, #f6825f 100%);  /* the highlight button and call-outs */
    --grad-hero: linear-gradient(160deg, #001f26 0%, #002a2c 55%, #1f1b35 100%);  /* sign-in and page-header backgrounds (text on it uses --fg) */
    /* Charts: categorical series in this fixed order (aqua, coral, violet, sun, sky, leaf); one-hue sequential
       steps light to dark; a diverging pair (negative, neutral middle, positive). See docs/design-standards.md 2.7. */
    --chart-1: #09a0a0;
    --chart-2: #ce6234;
    --chart-3: #8864c0;
    --chart-4: #bf8608;
    --chart-5: #4683c5;
    --chart-6: #399d57;
    --chart-seq-1: #023538;
    --chart-seq-2: #04585c;
    --chart-seq-3: #07858a;
    --chart-seq-4: #2bb3b9;
    --chart-seq-5: #7edde2;
    --chart-neg: #fc8b5d;
    --chart-mid: #555555;
    --chart-pos: #4eccd3;
  }
}

/* Fingers: taller controls and rows on touch screens. */
@media (pointer: coarse) {
  :root {
    --control-h: 2.75rem;
    --control-h-sm: 2.25rem;
    --control-h-lg: 3.25rem;
    --row-h: 3.25rem;
  }
}

/* People who asked for less motion get none that matters. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 1ms;
    --dur-2: 1ms;
    --dur-3: 1ms;
  }
}

/* Printed pages (manifests, day sheets) are always light and flat, whatever the screen shows. */
@media print {
  :root,
  :root[data-theme] {
    color-scheme: light;
    --bg: #ffffff;  /* the page canvas */
    --surface: #ffffff;  /* cards, inputs, panels, table bodies */
    --surface-2: #f2f2f2;  /* table headers, alternate rows, wells */
    --surface-3: #e6e6e6;  /* pressed and hovered neutrals, segmented-control tracks */
    --surface-inverse: #152631;  /* tooltips, keyboard hints */
    --fg-inverse: #f2f6f8;  /* text on surface-inverse */
    --fg: #000000;  /* text */
    --muted: #444444;  /* secondary text, labels, icons at rest */
    --hint: #64747e;  /* placeholders and hints, on surfaces only */
    --line: #bbbbbb;  /* hairline dividers (decorative, no contrast rule) */
    --border: #666666;  /* control outlines (3:1 against surface and bg) */
    --border-strong: #536672;  /* outlined buttons, emphasised edges */
    --accent: #02787d;  /* primary actions, links, selected states (the brand aqua) */
    --accent-fg: #ffffff;  /* text and icons on accent */
    --accent-hover: #00686c;  /* accent on hover */
    --accent-active: #04585c;  /* accent while pressed */
    --accent-soft: #d8f5f6;  /* tinted fills: selected rows, tonal buttons, active tabs */
    --accent-text: #035e63;  /* links and accent-coloured text on any surface (4.5:1) */
    --pop: #e86a34;  /* the warm highlight: badges that must be seen, the one call-out per screen */
    --pop-fg: #2f1810;  /* text on pop (always dark ink) */
    --pop-hover: #f67742;  /* pop on hover */
    --pop-soft: #feeae2;  /* pop tint for chips and call-out panels */
    --pop-text: #9d3901;  /* pop as text, on surfaces and pop-soft */
    --ok: #21763c;  /* success as text or a fill (confirmed, paid, in) */
    --ok-soft: #dcf7e1;  /* success tint */
    --ok-text: #0b5d2a;  /* text on ok-soft */
    --warn: #835a01;  /* attention as text or a fill (held, due, unpaid) */
    --warn-soft: #fff0d9;  /* attention tint */
    --warn-text: #755000;  /* text on warn-soft */
    --bad: #af2938;  /* problems as text or a fill (cancelled, failed, over) */
    --bad-fg: #ffffff;  /* text on bad (danger buttons) */
    --bad-soft: #fee9e8;  /* problem tint */
    --bad-text: #9a1c2e;  /* text on bad-soft */
    --info: #1364b0;  /* neutral notice (web booking, note) */
    --info-soft: #e3f0ff;  /* notice tint */
    --info-text: #08569a;  /* text on info-soft */
    --focus: #0c72cb;  /* the keyboard focus ring */
    --selection: #afebee;  /* selected text and chosen calendar ranges */
    --row-hover: #e9f7f7;  /* a table or list row under the pointer */
    --scrim: rgb(16 24 40 / 0.45);  /* behind dialogs and sheets */
    --shadow-rgb: 0 0 0;  /* the ink the shadows are mixed from */
    --sheen: rgb(255 255 255 / 0.5);  /* the soft top light on gradient cards */
    --grad-accent: linear-gradient(135deg, #047f7c 0%, #01606e 100%);  /* primary buttons, the app bar line, hero cards */
    --grad-pop: linear-gradient(135deg, #fa934e 0%, #ea6744 100%);  /* the highlight button and call-outs */
    --grad-hero: linear-gradient(160deg, #e7f9fe 0%, #c2f3f5 55%, #feeadb 100%);  /* sign-in and page-header backgrounds (text on it uses --fg) */
    /* Charts: categorical series in this fixed order (aqua, coral, violet, sun, sky, leaf); one-hue sequential
       steps light to dark; a diverging pair (negative, neutral middle, positive). See docs/design-standards.md 2.7. */
    --chart-1: #029393;
    --chart-2: #d05418;
    --chart-3: #6e3ead;
    --chart-4: #b78006;
    --chart-5: #0064b5;
    --chart-6: #429c5a;
    --chart-seq-1: #d5f2f3;
    --chart-seq-2: #93d9dc;
    --chart-seq-3: #40b1b7;
    --chart-seq-4: #07858a;
    --chart-seq-5: #04585c;
    --chart-neg: #d05418;
    --chart-mid: #d1d1d1;
    --chart-pos: #07858a;
    --grad-accent: none;
    --grad-pop: none;
    --grad-hero: none;
    --shadow-1: none;
    --shadow-2: none;
    --shadow-3: none;
  }
}