/* Harbour Bold tokens, from packages/design-tokens/theme.css (the @variant light and dark declarations).
   docs/design-system/harbour-bold.html holds the scales they are drawn from. The light and dark blocks hold identical keys. */
:root {
  --font-sans: "Noto Sans", system-ui, sans-serif;
  --radius-sm: 0.125rem; --radius-md: 0.25rem; --radius-lg: 0.375rem; --radius-xl: 0.625rem;
  --shadow-xs: 0 0.0625rem 0.0625rem 0 #0000000a;
  --shadow-sm: 0 0.0625rem 0.125rem 0 #0000000f;
  --shadow-md: 0 0.1875rem 0.5rem -0.125rem #00000017;
  --shadow-lg: 0 0.5rem 1.25rem -0.375rem #0000001f;
  --spacing: 0.25rem;
  /* The phone frame's bezel: drawing chrome, not a product colour. */
  --frame-bezel: #0b0b0d;
}
/* Light: the @variant light declarations. */
:root {
  color-scheme: light;
  --background-color-canvas: #f7faff;
  --background-color-surface: #ffffff;
  --background-color-raised: #ffffff;
  --background-color-sunken: #eef4fd;
  --background-color-hover: #0e19270f;
  --background-color-overlay: #050c1980;
  --background-color-brand: #104a97;
  --background-color-brand-hover: #093773;
  --background-color-brand-subtle: #f2f7ff;
  --text-color-primary: #050c19;
  --text-color-secondary: #354254;
  --text-color-tertiary: #495669;
  --text-color-disabled: #96a3b4;
  --text-color-on-brand: #ffffff;
  --text-color-brand: #104a97;
  --text-color-link: #1258b4;
  --background-color-shell: #032350;
  --background-color-shell-active: #104a97;
  --text-color-on-shell: #ffffff;
  --text-color-on-shell-muted: #c2dbff;
  --border-color-default: #cad5e5;
  --border-color-subtle: #eef4fd;
  --border-color-strong: #667488;
  --border-color-brand: #104a97;
  --ring-color-focus: #3d87f0;
  --outline-color-focus: #3d87f0;
  --background-color-success: #008850;
  --text-color-on-success: #ffffff;
  --background-color-success-subtle: #eefbf2;
  --text-color-success: #006f40;
  --border-color-success: #b5e7c7;
  --background-color-warning: #d39700;
  --text-color-on-warning: #050c19;
  --background-color-warning-subtle: #fef6e8;
  --text-color-warning: #795500;
  --border-color-warning: #f4d4a0;
  --background-color-danger: #cc2823;
  --background-color-danger-hover: #ac1313;
  --text-color-on-danger: #ffffff;
  --background-color-danger-subtle: #fff4f2;
  --text-color-danger: #ac1313;
  --border-color-danger: #ffcbc3;
  --border-color-danger-strong: #ac1313;
  --background-color-info: #0077bc;
  --text-color-on-info: #ffffff;
  --background-color-info-subtle: #f0f8ff;
  --text-color-info: #00619b;
  --border-color-info: #b9deff;
  --background-color-neutral-subtle: #eef4fd;
  --text-color-neutral: #354254;
  --border-color-neutral: #cad5e5;
  --color-chart-1: #135fc2;
  --color-chart-2: #009383;
  --color-chart-3: #6f43b2;
  --color-chart-4: #d0a900;
  --color-chart-5: #af3679;
  --color-chart-6: #61b94c;
  --color-chart-7: #0099a6;
  --color-chart-8: #d8524e;
  --color-chart-seq-1: #dfecff;
  --color-chart-seq-2: #b5d3ff;
  --color-chart-seq-3: #84b6ff;
  --color-chart-seq-4: #6399e7;
  --color-chart-seq-5: #427aca;
  --color-chart-seq-6: #2c5da3;
  --color-chart-seq-7: #16417d;
  --color-chart-div-1: #1b4b8f;
  --color-chart-div-2: #417fd8;
  --color-chart-div-3: #94c0ff;
  --color-chart-div-4: #dee7f3;
  --color-chart-div-5: #ffa098;
  --color-chart-div-6: #ca5551;
  --color-chart-div-7: #832a29;
}
/* Dark: the @variant dark declarations, by the device's setting or the theme switch. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --background-color-canvas: #050c19;
    --background-color-surface: #0e1927;
    --background-color-raised: #1e293a;
    --background-color-sunken: #050c19;
    --background-color-hover: #f7faff14;
    --background-color-overlay: #000000a6;
    --background-color-brand: #236ed4;
    --background-color-brand-hover: #1258b4;
    --background-color-brand-subtle: #032350;
    --text-color-primary: #f7faff;
    --text-color-secondary: #cad5e5;
    --text-color-tertiary: #96a3b4;
    --text-color-disabled: #495669;
    --text-color-on-brand: #ffffff;
    --text-color-brand: #64a3ff;
    --text-color-link: #64a3ff;
    --background-color-shell: #032350;
    --background-color-shell-active: #104a97;
    --text-color-on-shell: #ffffff;
    --text-color-on-shell-muted: #9ac3ff;
    --border-color-default: #f7faff29;
    --border-color-subtle: #f7faff12;
    --border-color-strong: #667488;
    --border-color-brand: #236ed4;
    --ring-color-focus: #64a3ff;
    --outline-color-focus: #64a3ff;
    --background-color-success: #008850;
    --text-color-on-success: #ffffff;
    --background-color-success-subtle: #002e17;
    --text-color-success: #88d5a6;
    --border-color-success: #005832;
    --background-color-warning: #d39700;
    --text-color-on-warning: #050c19;
    --background-color-warning-subtle: #342100;
    --text-color-warning: #e8b865;
    --border-color-warning: #614300;
    --background-color-danger: #cc2823;
    --background-color-danger-hover: #ac1313;
    --text-color-on-danger: #ffffff;
    --background-color-danger-subtle: #4c0303;
    --text-color-danger: #ffa69a;
    --border-color-danger: #8b090a;
    --border-color-danger-strong: #ffa69a;
    --background-color-info: #0077bc;
    --text-color-on-info: #ffffff;
    --background-color-info-subtle: #002744;
    --text-color-info: #87c8ff;
    --border-color-info: #004d7c;
    --background-color-neutral-subtle: #354254;
    --text-color-neutral: #cad5e5;
    --border-color-neutral: #495669;
    --color-chart-1: #3078dd;
    --color-chart-2: #009888;
    --color-chart-3: #885ed0;
    --color-chart-4: #b08e00;
    --color-chart-5: #c3498b;
    --color-chart-6: #4da637;
    --color-chart-7: #0097a4;
    --color-chart-8: #d8524e;
    --color-chart-seq-1: #083167;
    --color-chart-seq-2: #1a4684;
    --color-chart-seq-3: #2e5fa6;
    --color-chart-seq-4: #427aca;
    --color-chart-seq-5: #6096e5;
    --color-chart-seq-6: #84b6ff;
    --color-chart-seq-7: #bad6ff;
    --color-chart-div-1: #9fc6ff;
    --color-chart-div-2: #5892e7;
    --color-chart-div-3: #2c62ae;
    --color-chart-div-4: #354254;
    --color-chart-div-5: #a23d3a;
    --color-chart-div-6: #db6c65;
    --color-chart-div-7: #ffaaa3;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --background-color-canvas: #050c19;
  --background-color-surface: #0e1927;
  --background-color-raised: #1e293a;
  --background-color-sunken: #050c19;
  --background-color-hover: #f7faff14;
  --background-color-overlay: #000000a6;
  --background-color-brand: #236ed4;
  --background-color-brand-hover: #1258b4;
  --background-color-brand-subtle: #032350;
  --text-color-primary: #f7faff;
  --text-color-secondary: #cad5e5;
  --text-color-tertiary: #96a3b4;
  --text-color-disabled: #495669;
  --text-color-on-brand: #ffffff;
  --text-color-brand: #64a3ff;
  --text-color-link: #64a3ff;
  --background-color-shell: #032350;
  --background-color-shell-active: #104a97;
  --text-color-on-shell: #ffffff;
  --text-color-on-shell-muted: #9ac3ff;
  --border-color-default: #f7faff29;
  --border-color-subtle: #f7faff12;
  --border-color-strong: #667488;
  --border-color-brand: #236ed4;
  --ring-color-focus: #64a3ff;
  --outline-color-focus: #64a3ff;
  --background-color-success: #008850;
  --text-color-on-success: #ffffff;
  --background-color-success-subtle: #002e17;
  --text-color-success: #88d5a6;
  --border-color-success: #005832;
  --background-color-warning: #d39700;
  --text-color-on-warning: #050c19;
  --background-color-warning-subtle: #342100;
  --text-color-warning: #e8b865;
  --border-color-warning: #614300;
  --background-color-danger: #cc2823;
  --background-color-danger-hover: #ac1313;
  --text-color-on-danger: #ffffff;
  --background-color-danger-subtle: #4c0303;
  --text-color-danger: #ffa69a;
  --border-color-danger: #8b090a;
  --border-color-danger-strong: #ffa69a;
  --background-color-info: #0077bc;
  --text-color-on-info: #ffffff;
  --background-color-info-subtle: #002744;
  --text-color-info: #87c8ff;
  --border-color-info: #004d7c;
  --background-color-neutral-subtle: #354254;
  --text-color-neutral: #cad5e5;
  --border-color-neutral: #495669;
  --color-chart-1: #3078dd;
  --color-chart-2: #009888;
  --color-chart-3: #885ed0;
  --color-chart-4: #b08e00;
  --color-chart-5: #c3498b;
  --color-chart-6: #4da637;
  --color-chart-7: #0097a4;
  --color-chart-8: #d8524e;
  --color-chart-seq-1: #083167;
  --color-chart-seq-2: #1a4684;
  --color-chart-seq-3: #2e5fa6;
  --color-chart-seq-4: #427aca;
  --color-chart-seq-5: #6096e5;
  --color-chart-seq-6: #84b6ff;
  --color-chart-seq-7: #bad6ff;
  --color-chart-div-1: #9fc6ff;
  --color-chart-div-2: #5892e7;
  --color-chart-div-3: #2c62ae;
  --color-chart-div-4: #354254;
  --color-chart-div-5: #a23d3a;
  --color-chart-div-6: #db6c65;
  --color-chart-div-7: #ffaaa3;
}
/* Density: compact for staff web, comfortable for the Client, on the web and in the app. */
.compact { --control-h: 2rem; --control-px: 0.75rem; --control-fs: 0.875rem; --row-h: 2.25rem; --body-fs: 0.875rem; --body-lh: 1.25rem; }
.comfortable { --control-h: 2.75rem; --control-px: 1rem; --control-fs: 1rem; --row-h: 3rem; --body-fs: 1rem; --body-lh: 1.5rem; }
/* Below 48rem a control is a 44 px touch target, its text 16 px so iOS Safari never zooms on focus. */
@media (max-width: 47.99rem) { .compact { --control-h: 2.75rem; --control-fs: 1rem; } }