/*
 * Design tokens. Everything else (app-shell.css, components.css, auth.css) reads colors,
 * radius and shadow from these custom properties rather than hardcoding values, so the whole
 * app reskins from one place and light/dark mode is one attribute flip.
 *
 * Bootstrap 5.3's own dark theme activates automatically wherever `data-bs-theme="dark"` is set
 * (native components - dropdowns, tables, alerts - already ship dark variants keyed off that
 * attribute, no Sass rebuild needed). This file layers our brand tokens on the SAME attribute so
 * custom chrome (sidebar, topbar, auth page, cards) switches in lock-step with Bootstrap's own
 * components instead of drifting out of sync.
 */

:root {
    --brand: #0f5132;
    --brand-dark: #0b3d26;
    --brand-light: #1f8b53;
    --brand-tint: rgba(15, 81, 50, 0.1);
    --brand-tint-strong: rgba(15, 81, 50, 0.16);

    --surface: #ffffff;
    --surface-alt: #f6f7f9;
    --surface-raised: #ffffff;
    --border: #e5e7eb;
    --text: #1f2937;
    --text-muted: #6b7280;

    --radius-sm: 0.5rem;
    --radius: 0.65rem;
    --radius-lg: 1rem;

    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
    --shadow: 0 1px 3px rgba(16, 24, 40, 0.1), 0 1px 2px rgba(16, 24, 40, 0.06);
    --shadow-md: 0 8px 24px rgba(16, 24, 40, 0.1);

    color-scheme: light;
}

[data-bs-theme="dark"] {
    --brand: #34d399;
    --brand-dark: #10b981;
    --brand-light: #6ee7b7;
    --brand-tint: rgba(52, 211, 153, 0.14);
    --brand-tint-strong: rgba(52, 211, 153, 0.22);

    --surface: #111827;
    --surface-alt: #0b0f19;
    --surface-raised: #161f2e;
    --border: #253044;
    --text: #e5e7eb;
    --text-muted: #94a3b8;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 12px 28px rgba(0, 0, 0, 0.55);

    color-scheme: dark;
}

/* Round the whole system a touch more than Bootstrap's default, in one place. */
:root,
[data-bs-theme="dark"] {
    --bs-border-radius-sm: var(--radius-sm);
    --bs-border-radius: var(--radius);
    --bs-border-radius-lg: var(--radius-lg);
    --bs-border-color: var(--border);
    --bs-link-color: var(--brand);
    --bs-link-hover-color: var(--brand-dark);
    --bs-focus-ring-color: var(--brand-tint-strong);
}

body {
    color: var(--text);
}