/* OnSite design tokens: Workbench neutrals, Cobalt accent, status groups. Values come from
   DESIGN.md §2 to §4; change them there first. Components use these tokens, never literal colours. */

:root,
[data-bs-theme="light"] {
    --bg: #f6f8fb;
    --surface: #ffffff;
    --surface-2: #f3f5f8;
    --border: #e4e7ec;
    --field-border: #8a93a3;
    --text: #101828;
    --muted: #5b6577;
    --card-border: #e4e7ec;
    --shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    --lift-shadow: 0 8px 24px rgba(16, 24, 40, 0.08);
    --overlay-shadow: 0 20px 50px rgba(16, 24, 40, 0.18), 0 4px 12px rgba(16, 24, 40, 0.08);
    --scrim: rgba(16, 24, 40, 0.42);
    --bubble: #f3f5f8;
    --bubble-border: #e4e7ec;

    --accent-fill: #2563eb;
    --on-accent: #ffffff;
    --accent: #2563eb;
    --accent-soft: #e8f0fe;
    --accent-soft-fg: #1d4ed8;

    --status-neutral: #475467;
    --status-neutral-soft: #f2f4f7;
    --status-progress: #6d28d9;
    --status-progress-soft: #efe9fd;
    --status-waiting: #b54708;
    --status-waiting-soft: #fef0dc;
    --status-done: #067647;
    --status-done-soft: #dcfae6;
    --status-problem: #b42318;
    --status-problem-soft: #fee4e2;
    --status-problem-solid: #d92d20;

    /* Revenue only, never a status (DESIGN.md §2.4). Slate is the fifth workload colour. */
    --teal: #0e7c86;
    --teal-soft: #ddf4f5;
    --slate: #64748b;
    --navy: #0f2a4a;
    --toast-bg: #101828;
    --toast-fg: #f8fafc;

    --font-ui: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-num: var(--font-ui);
    --control-h: 36px;
    --action-h: 48px;
    --radius: 8px;
    --radius-lg: 12px;
    --radius-pill: 6px;
    --gap: 16px;
    --pad: 20px;
    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--accent-fill) 22%, transparent);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

    color-scheme: light;
}

[data-bs-theme="dark"] {
    --bg: #101117;
    --surface: #171a22;
    --surface-2: #1c1f29;
    --border: #2a2e3b;
    --field-border: #636a80;
    --text: #e8e9f0;
    --muted: #9ca0b5;
    --card-border: #262a36;
    --shadow: none;
    --lift-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    --overlay-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
    --scrim: rgba(0, 0, 0, 0.55);
    --bubble: #1f2330;
    --bubble-border: #2c3140;

    --accent-fill: #2563eb;
    --on-accent: #ffffff;
    --accent: #93b8ff;
    --accent-soft: #16284a;
    --accent-soft-fg: #c7d9ff;

    --status-neutral: #b8bccb;
    --status-neutral-soft: #252935;
    --status-progress: #c3b4f8;
    --status-progress-soft: #2a2150;
    --status-waiting: #f0b45a;
    --status-waiting-soft: #3a2a10;
    --status-done: #5ccb8d;
    --status-done-soft: #12301f;
    --status-problem: #f2837a;
    --status-problem-soft: #3d1815;
    --status-problem-solid: #d92d20;

    --teal: #5fd0d8;
    --teal-soft: #11313a;
    --slate: #94a3b8;
    --navy: #2563eb;
    --toast-bg: #e8e9f0;
    --toast-fg: #101117;

    color-scheme: dark;
}

/* Touch screens get bigger targets (DESIGN.md §4). */
@media (pointer: coarse) {
    :root {
        --control-h: 44px;
    }
}

/* Bootstrap reads its own variables; point them at ours so its components match. */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
    --bs-body-bg: var(--bg);
    --bs-body-color: var(--text);
    --bs-body-font-family: var(--font-ui);
    --bs-body-font-size: 0.875rem;
    --bs-secondary-color: var(--muted);
    --bs-tertiary-bg: var(--surface-2);
    --bs-border-color: var(--border);
    --bs-border-radius: var(--radius);
    --bs-border-radius-lg: var(--radius-lg);
    --bs-link-color: var(--accent);
    --bs-link-hover-color: var(--accent);
    --bs-focus-ring-color: color-mix(in srgb, var(--accent-fill) 22%, transparent);
    --bs-primary: var(--accent-fill);
}