/* Default theme: Qualiphy's own brand, from the Qualiphy Design Guidelines (Thomas, 2026-10-20; vault v2/Qualiphy Design Guidelines) with the product's light and dark modes added. Light by default, dark automatically when the operating
   system asks for it, and forceable either way with <html data-mode="light|dark">. This ONE file maps the guide into v2: the palette, the neutrals, the states, the type scale, the layout and the component metrics are tokens here, and static/brand.css
   (loaded only in the new look) is made of nothing else. Where v2 keeps its own rule over the guide (contrast, the dark mode, the menu), the reason is written beside the token and in the vault note "Branding guidelines applied to v2 (2026-10-29)". */
:root {
  --brand-lavender: #dabfff; --brand-purple: #907ad6; --brand-slate: #4f518c; --brand-navy: #2c2a4a;      /* the four brand colors, exactly. The brand purple is for glows: white text on it is 3.5:1 (WCAG AA needs 4.5), so a fill that carries text uses --color-accent */

  --font-body: "Gilroy", "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;      /* Gilroy when the visitor has it installed (licensed: no files), then Plus Jakarta Sans, which the new look's brand.css serves from this site (static/fonts, @font-face); the installed system fonts are the fallback. No page loads a font from another origin (the content security policy and a test forbid it) */
  --font-heading: var(--font-body); --font-button: var(--font-body);
  --font-size-base: 16px; --font-size-h1: 2.25rem; --font-size-h2: 1.5rem; --font-size-card-title: 1.125rem;
  --font-size-button: .875rem; --font-size-button-sm: .8125rem; --font-size-label: .8125rem; --font-size-help: .75rem; --font-size-table: .875rem; --font-size-table-head: .75rem;
  --font-size-badge: .75rem; --font-size-eyebrow: .75rem; --font-size-stat: 1.875rem; --font-size-nav-section: .6875rem;
  --font-weight-heading: 700; --font-weight-button: 600;
  --track-eyebrow: .14em; --track-label: .06em; --track-nav-section: .16em;
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem;
  --space-field: 1.25rem; --space-page-bottom: 3rem;      /* the guide's 20px between form fields and 48px under the page */
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 22px; --radius-control-sm: 8px; --radius-pop: 14px; --radius-modal: 18px; --radius-pill: 999px;
  --content-max: 87.5rem;      /* 1400px, the guide's main column */
  --btn-pad: .6875rem 1.25rem; --btn-pad-sm: .3rem .65rem;      /* the guide's small button is 8px 14px; dense tables and rows (Async review) need it tighter to keep their buttons in line */ --input-pad: .6875rem .875rem; --badge-pad: .25rem .75rem;
  --ring-glow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 18%, transparent);      /* the focus glow of a text field: a purple 3px halo */
  --logo-h-sm: 1.75rem; --logo-h-md: 2.25rem; --logo-h-lg: 3.75rem;      /* the official logo's heights (its width follows: 4.25 to 1); the guide asks for it never to be stretched or recolored */
  --target-min: 2.75rem;      /* a button is at least 44px tall (the staff screens' touch-target rule) */
  --motion: 180ms; --ease: cubic-bezier(.2, .7, .2, 1);
  --env-banner-h: 0px;      /* the height the page keeps free at its foot for the environment banner (base.css raises it on a system that has one) */
  --nav-width: 18rem; --rail-width: 4.75rem;      /* the whole menu: the rail of areas plus the column of the open area (Allan's pick, 2026-10-17: the guide's 240px sidebar is NOT used) */
  --sidebar-accent: color-mix(in srgb, var(--color-accent) 45%, var(--sidebar-active-text));   /* the accent as it must look on the dark sidebar */
  --icon-tone: color-mix(in srgb, var(--color-accent) 30%, transparent);   /* the second tone of every icon and of the brand mark */

  --color-bg: #f6f5fb; --color-surface: #ffffff; --color-surface-2: #f3f2fa; --color-border: #e6e3f2;
  --color-text: #2c2a4a; --color-text-muted: #5c5b76;      /* the guide's muted #6b6a85 darkened two steps: on a tinted surface (the secondary button, a schedule tile) it is 4.1 to 4.5:1, under AA */
  --color-accent: #7b63cb; --color-accent-hover: #6650be; --color-accent-pressed: #4f518c; --color-accent-disabled: #cfc6ec; --color-on-accent: #ffffff; --color-accent-text: #6650be;      /* #7b63cb is the guide's own hover purple: white on it is 4.7:1; the guide's #907ad6 is 3.5:1 */
  --color-focus: #7b63cb;
  --color-tint: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface));      /* the guide's #eee8ff: secondary button, selected card, pending badge; derived, so a named theme and the dark mode follow the accent */
  --color-on-tint: color-mix(in srgb, var(--color-accent-text) 70%, var(--color-text));      /* the words of a soft button or an info badge on the tint: the accent's text color a step toward the page text, so every theme passes AA (the green theme's own accent text is 4.3:1 on its tint) */
  --color-danger: #b93a3a; --color-danger-hover: #9b2c2c; --color-on-danger: #ffffff;      /* the guide's #d64545 with white text is 4.4:1; its hover red passes */
  --color-danger-soft: #fde7e7; --color-danger-text: #9b2c2c; --color-danger-border: #f3c5c5;
  --color-ok-bg: #e3f6ea; --color-ok-text: #166534; --color-ok-border: #c9ebd6;      /* the guide's badge text (#1f9d55, #d64545, #b7791f) is 3.1 to 3.7:1 on its tint: badges use the banner text colors, which pass */
  --color-warn-bg: #fff4e0; --color-warn-text: #92400e; --color-warn-border: #f5deb3;
  --color-neutral-bg: #eeeef4; --color-neutral-text: #55546e;
  --color-table-head-bg: #fafafd; --color-row-hover: #fbfafe;
  --color-env-bg: #8f1d1d; --color-env-text: #ffffff;      /* the environment banner: white on a dark red, in both modes */
  --color-assume-ro-bg: #dbeafe; --color-assume-ro-text: #0b2a4a; --color-assume-rw-bg: #ffd60a; --color-assume-rw-text: #231a00;      /* the Assume User bar: calm blue for read-only, amber for read-write (the words and the icon say it too) */
  --color-live-on: #166534; --color-live-off: #b91c1c; --color-live-away: #92400e; --color-live-fg: #ffffff;      /* the provider's big on/off switch: online, offline, away; the text on all three */
  --sidebar-bg: #2c2a4a; --sidebar-text: #d9d7ea; --sidebar-hover-bg: #38365c; --sidebar-label: #dabfff;
  --sidebar-active-bg: #7b63cb; --sidebar-active-text: #ffffff;
  --sidebar-gradient: linear-gradient(180deg, #2f2d50 0%, #2c2a4a 55%, #252342 100%);
  --guest-bg: radial-gradient(1100px 600px at 8% 110%, rgb(144 122 214 / .5), transparent 60%), radial-gradient(800px 500px at 100% -10%, rgb(218 191 255 / .28), transparent 60%), linear-gradient(180deg, #2f2d50, #252342);      /* the signed-out pages: the navy gradient with a purple and a lavender glow */
  --shadow-card: 0 2px 10px rgb(44 42 74 / .04); --shadow-pop: 0 12px 32px rgb(44 42 74 / .12); --shadow-modal: 0 24px 64px rgb(44 42 74 / .25);      /* always tinted with navy, never pure black */
  --shadow-primary: 0 4px 14px color-mix(in srgb, var(--color-accent) 30%, transparent); --shadow-nav-active: 0 6px 16px color-mix(in srgb, var(--color-accent) 35%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) {
    --color-bg: #17162b; --color-surface: #1f1d33; --color-surface-2: #2a2848; --color-border: #3a3860;
    --color-text: #ecebf7; --color-text-muted: #b4b3cc;
    --color-accent: #b8a5f0; --color-accent-hover: #cdbdf6; --color-accent-pressed: #a08cec; --color-accent-disabled: #4a4770; --color-on-accent: #15142a; --color-accent-text: #cbbcf7;
    --color-focus: #cdbdf6;
    --color-danger: #d95757; --color-danger-hover: #e87a7a; --color-on-danger: #15142a;
    --color-danger-soft: #3a1717; --color-danger-text: #ffb4b4; --color-danger-border: #6b2b2b;
    --color-ok-bg: #12301f; --color-ok-text: #86efac; --color-ok-border: #1f5a38;
    --color-warn-bg: #36270c; --color-warn-text: #fcd34d; --color-warn-border: #5c4416;
    --color-neutral-bg: #2a2848; --color-neutral-text: #c9c8e0;
    --color-table-head-bg: #1b1a30; --color-row-hover: #252340;
    --color-env-bg: #a8231b; --color-env-text: #ffffff;
    --color-assume-ro-bg: #12365c; --color-assume-ro-text: #e6f0ff; --color-assume-rw-bg: #ffd60a; --color-assume-rw-text: #231a00;
    --color-live-on: #15803d; --color-live-off: #dc2626; --color-live-away: #b45309; --color-live-fg: #ffffff;
    --sidebar-bg: #100f22; --sidebar-text: #cfcde6; --sidebar-hover-bg: #1f1d3a; --sidebar-label: #dabfff;
    --sidebar-active-bg: #7b63cb; --sidebar-active-text: #ffffff;
    --sidebar-gradient: linear-gradient(180deg, #1b1a33 0%, #141328 55%, #0e0d1f 100%);
    --shadow-card: 0 2px 10px rgb(0 0 0 / .35); --shadow-pop: 0 12px 32px rgb(0 0 0 / .5); --shadow-modal: 0 24px 64px rgb(0 0 0 / .6);
    --shadow-primary: 0 4px 14px color-mix(in srgb, var(--color-accent) 25%, transparent); --shadow-nav-active: 0 6px 16px color-mix(in srgb, var(--color-accent) 45%, transparent);
  }
}
:root[data-mode="dark"] {
  --color-bg: #17162b; --color-surface: #1f1d33; --color-surface-2: #2a2848; --color-border: #3a3860;
  --color-text: #ecebf7; --color-text-muted: #b4b3cc;
  --color-accent: #b8a5f0; --color-accent-hover: #cdbdf6; --color-accent-pressed: #a08cec; --color-accent-disabled: #4a4770; --color-on-accent: #15142a; --color-accent-text: #cbbcf7;
  --color-focus: #cdbdf6;
  --color-danger: #d95757; --color-danger-hover: #e87a7a; --color-on-danger: #15142a;
  --color-danger-soft: #3a1717; --color-danger-text: #ffb4b4; --color-danger-border: #6b2b2b;
  --color-ok-bg: #12301f; --color-ok-text: #86efac; --color-ok-border: #1f5a38;
  --color-warn-bg: #36270c; --color-warn-text: #fcd34d; --color-warn-border: #5c4416;
  --color-neutral-bg: #2a2848; --color-neutral-text: #c9c8e0;
  --color-table-head-bg: #1b1a30; --color-row-hover: #252340;
  --color-env-bg: #a8231b; --color-env-text: #ffffff;
  --color-assume-ro-bg: #12365c; --color-assume-ro-text: #e6f0ff; --color-assume-rw-bg: #ffd60a; --color-assume-rw-text: #231a00;
  --color-live-on: #15803d; --color-live-off: #dc2626; --color-live-away: #b45309; --color-live-fg: #ffffff;
  --sidebar-bg: #100f22; --sidebar-text: #cfcde6; --sidebar-hover-bg: #1f1d3a; --sidebar-label: #dabfff;
  --sidebar-active-bg: #7b63cb; --sidebar-active-text: #ffffff;
  --sidebar-gradient: linear-gradient(180deg, #1b1a33 0%, #141328 55%, #0e0d1f 100%);
  --shadow-card: 0 2px 10px rgb(0 0 0 / .35); --shadow-pop: 0 12px 32px rgb(0 0 0 / .5); --shadow-modal: 0 24px 64px rgb(0 0 0 / .6);
  --shadow-primary: 0 4px 14px color-mix(in srgb, var(--color-accent) 25%, transparent); --shadow-nav-active: 0 6px 16px color-mix(in srgb, var(--color-accent) 45%, transparent);
}