/*
 * CloudBM's design tokens as CSS custom properties (#1867), written from
 * tokens.json beside this file: the CloudBM design system's own export. A
 * name here is the token's name, so a rule reads var(--action) where the
 * system says `action`.
 *
 * The landing page, sign-on, the portal and the back office link this before
 * their own stylesheet and colour nothing outside it. Where the code and the
 * system disagree, the system wins (owner, 2026-10-02): change tokens.json
 * from the system, then this file; theme_test.go holds the two to each other.
 *
 * Dark values apply only to a page that asks for them with data-theme on its
 * <html>: "auto" follows the reader's setting, "dark" forces it. The portal
 * and the back office ask for neither yet, because Bootstrap beneath them has
 * no dark theme wired, and half a dark page is worse than a light one.
 *
 * A tenant's brand overrides --action, --action-hover, --focus, --tint and
 * --tint-line on a plain :root. The dark blocks are more specific, so the
 * dark theme keeps the system's dark action, as the system says it should.
 */

:root {
    --navy: #0B1F3F;
    --blue: #1E5AA0;
    --blue-light: #8FC1F0;
    --white: #FFFFFF;
    --surface: #FFFFFF;
    --surface-alt: #F4F7FB;
    --panel: #0B1F3F;
    --text: #0B1F3F;
    --text-muted: #4A6078;
    --action: #1E5AA0;
    --action-hover: #174883;
    --on-action: #FFFFFF;
    --focus: var(--action);
    --tint: #E6EEF8;
    --tint-line: #C0D1E4;
    --line: #D8E1EC;
    --input-border: #6B7F97;
    --sidebar: #0B1F3F;
    --sidebar-text: #C9D6E6;
    --sidebar-active: #8FC1F0;
    --sidebar-active-bg: #20395B;
    --sidebar-section: #8DA2BD;
    --sidebar-hover: rgba(255, 255, 255, 0.06);
    --sidebar-line: rgba(255, 255, 255, 0.08);
    --text-on-panel: #FFFFFF;
    --text-on-panel-muted: #C9D6E6;
    --waiting: #7A4300;
    --waiting-bg: #FDF0D8;
    --done: #1D6536;
    --done-bg: #E2F3E7;
    --danger: #A61B1B;
    --danger-bg: #FDECEC;
    --overlay: rgba(11, 31, 63, 0.5);
    --label-slate: #1e293b;
    --label-slate-bg: #e2e8f0;
    --label-red: #991b1b;
    --label-red-bg: #fee2e2;
    --label-orange: #9a3412;
    --label-orange-bg: #ffedd5;
    --label-amber: #92400e;
    --label-amber-bg: #fef3c7;
    --label-green: #166534;
    --label-green-bg: #dcfce7;
    --label-teal: #115e59;
    --label-teal-bg: #ccfbf1;
    --label-blue: #1e40af;
    --label-blue-bg: #dbeafe;
    --label-indigo: #3730a3;
    --label-indigo-bg: #e0e7ff;
    --label-violet: #5b21b6;
    --label-violet-bg: #ede9fe;
    --label-pink: #9d174d;
    --label-pink-bg: #fce7f3;

    --font-sans: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
    --font-wordmark: Poppins, "Segoe UI", system-ui, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-item: 12px;
    --radius-lg: 16px;
    --radius-pill: 999px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-9: 36px;
    --control-min: 44px;
    --control-sm: 32px;
    --header-height: 72px;
    --content-max: 1040px;
    --topbar-height: 68px;
    --rail-width: 92px;
    --panel-width: 232px;

    --shadow-overlay: 0 12px 28px rgba(11, 31, 63, 0.16);
}

@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] {
        --surface: #0B1F3F;
        --surface-alt: #132B52;
        --panel: #1A3A6B;
        --text: #FFFFFF;
        --text-muted: #A9B8C9;
        --action: #8FC1F0;
        --action-hover: #B4D6F5;
        --on-action: #0B1F3F;
        --tint: #24406B;
        --tint-line: #34558A;
        --line: #24406B;
        --input-border: #8A9BB0;
        --sidebar: #132B52;
        --sidebar-active-bg: #27436B;
        --waiting: #FCD34D;
        --waiting-bg: #422006;
        --done: #86EFAC;
        --done-bg: #14321F;
        --danger: #FCA5A5;
        --danger-bg: #3F1D1D;
        --overlay: rgba(0, 0, 0, 0.6);
        --shadow-overlay: 0 12px 28px rgba(0, 0, 0, 0.45);
        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --surface: #0B1F3F;
    --surface-alt: #132B52;
    --panel: #1A3A6B;
    --text: #FFFFFF;
    --text-muted: #A9B8C9;
    --action: #8FC1F0;
    --action-hover: #B4D6F5;
    --on-action: #0B1F3F;
    --tint: #24406B;
    --tint-line: #34558A;
    --line: #24406B;
    --input-border: #8A9BB0;
    --sidebar: #132B52;
    --sidebar-active-bg: #27436B;
    --waiting: #FCD34D;
    --waiting-bg: #422006;
    --done: #86EFAC;
    --done-bg: #14321F;
    --danger: #FCA5A5;
    --danger-bg: #3F1D1D;
    --overlay: rgba(0, 0, 0, 0.6);
    --shadow-overlay: 0 12px 28px rgba(0, 0, 0, 0.45);
    color-scheme: dark;
}