// Design tokens. Components read these variables, so dark mode only has to
// redefine them here.
:root {
    --app-font-num: 'Inter Variable', system-ui, sans-serif;

    --app-surface: #ffffff;
    --app-surface-2: #f8f9fc;          // table heads, zebra
    --app-border: #e6e8f0;
    --app-border-strong: #d5d9e6;
    --app-text: #1e293b;
    --app-muted: #576478;   // 5.6:1 on white, 5.1:1 on the page background
    --app-heading: #0f172a;

    --app-primary: #4f46e5;
    --app-primary-soft: #eef2ff;
    --app-accent: #f59e0b;             // saffron, carpet warmth

    --app-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
    --app-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 18px rgba(15, 23, 42, 0.05);
    --app-shadow-lg: 0 14px 40px rgba(15, 23, 42, 0.14);

    --sidebar-bg: #0f172a;
    --sidebar-bg-2: #111c35;
    --sidebar-text: #aab4c8;
    --sidebar-text-strong: #ffffff;
    --sidebar-hover: rgba(255, 255, 255, 0.06);
    --sidebar-active: rgba(99, 102, 241, 0.22);
    --sidebar-w: 264px;
    --sidebar-w-collapsed: 76px;
    --topbar-h: 62px;

    --chart-1: #4f46e5;
    --chart-2: #f59e0b;
    --chart-3: #10b981;
    --chart-4: #f43f5e;
    --chart-5: #0ea5e9;
    --chart-6: #8b5cf6;
    --chart-grid: rgba(100, 116, 139, 0.16);
}

[data-bs-theme='dark'] {
    --app-surface: #111a2e;
    --app-surface-2: #0f1830;
    --app-border: #1f2a44;
    --app-border-strong: #2b3857;
    --app-text: #e2e8f0;
    --app-muted: #94a3b8;
    --app-heading: #f8fafc;

    --app-primary: #818cf8;
    --app-primary-soft: rgba(129, 140, 248, 0.14);

    --app-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --app-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 18px rgba(0, 0, 0, 0.25);
    --app-shadow-lg: 0 14px 40px rgba(0, 0, 0, 0.5);

    --sidebar-bg: #080e1c;
    --sidebar-bg-2: #0c1428;
    --sidebar-active: rgba(129, 140, 248, 0.2);

    --chart-grid: rgba(148, 163, 184, 0.14);

    --bs-body-bg: #0b1120;
    --bs-body-color: #e2e8f0;
    --bs-border-color: #1f2a44;
    --bs-tertiary-bg: #0f1830;
    --bs-secondary-bg: #162039;
    --bs-link-color-rgb: 165, 180, 252;
    --bs-link-hover-color-rgb: 199, 210, 254;
}

// Bootstrap's .d-flex etc. are !important and would otherwise beat the hidden attribute
[hidden] { display: none !important; }

body {
    color: var(--app-text);
    font-feature-settings: 'cv11', 'ss01';
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--app-heading); letter-spacing: -0.01em; }

// Numbers line up in columns and cards.
.num, .tabular { font-variant-numeric: tabular-nums; }
.num { text-align: right; white-space: nowrap; }

:focus-visible { outline: 2px solid var(--app-primary); outline-offset: 2px; }
.btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible { outline: none; }

::selection { background: rgba(79, 70, 229, 0.22); }

.skip-link {
    position: absolute; left: 0.75rem; top: -3rem; z-index: 2000;
    background: var(--app-primary); color: #fff; padding: 0.5rem 0.9rem; border-radius: 0.5rem;
    &:focus { top: 0.75rem; color: #fff; }
}