/* Design tokens for the light/dark theme system. Component styles consume these
   custom properties instead of hard-coded colors so both themes stay in sync. */

:root {
    color-scheme: light;

    --color-bg: #f4f6f9;
    --color-surface: #ffffff;
    --color-surface-alt: #eef1f6;
    --color-border: #e1e6ee;

    --color-text: #1a2233;
    --color-text-muted: #64748b;

    --color-primary: #0b3d68;
    --color-primary-hover: #0a3457;
    --color-accent: #c9a24b;

    --color-positive: #1a8a5f;
    --color-negative: #c0392b;

    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
    --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08);

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;

    --sidebar-width: 248px;
    --topbar-height: 64px;
    --bottomnav-height: 58px;
}

:root[data-theme="dark"] {
    color-scheme: dark;

    /* Neutral charcoal, not navy - bg/surface/border deliberately keep the blue channel within
       1-4 of red/green (barely perceptible cool cast) rather than the previous 15-20 point gap
       (#0f1622 etc.), which read as distinctly blue-tinted rather than "dark". --color-primary
       keeps its blue for links/buttons - that's an intentional accent, not the page background. */
    --color-bg: #17181c;
    --color-surface: #1f2125;
    --color-surface-alt: #292b30;
    --color-border: #383a41;

    --color-text: #edeef0;
    --color-text-muted: #9a9da5;

    --color-primary: #4f8fd6;
    --color-primary-hover: #6ba2e0;
    --color-accent: #d8b968;

    --color-positive: #34c28c;
    --color-negative: #e0665a;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --color-bg: #17181c;
        --color-surface: #1f2125;
        --color-surface-alt: #292b30;
        --color-border: #383a41;

        --color-text: #edeef0;
        --color-text-muted: #9a9da5;

        --color-primary: #4f8fd6;
        --color-primary-hover: #6ba2e0;
        --color-accent: #d8b968;

        --color-positive: #34c28c;
        --color-negative: #e0665a;

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
        --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
    }
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
    transition: background-color 0.15s ease, color 0.15s ease;
}

a {
    color: var(--color-primary);
}

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}