/*
 * Design variables for the LowlandTech Graph presentation app.
 *
 * Light + dark themes follow shadcn-inspired CSS variable conventions. The
 * variables are consumed by app.css and the Razor primitives under Components/Primitives.
 * System preference drives the default theme; users may toggle via the shell.
 */

:root {
    color-scheme: light;

    --bg-base: 0 0% 100%;
    --bg-surface: 0 0% 98%;
    --bg-elevated: 0 0% 100%;
    --bg-muted: 220 14% 96%;
    --bg-accent: 221 83% 53%;
    --bg-accent-hover: 221 83% 47%;
    --bg-danger: 0 72% 51%;
    --bg-success: 142 71% 45%;

    --fg-primary: 222 47% 11%;
    --fg-secondary: 215 16% 35%;
    --fg-muted: 215 16% 47%;
    --fg-on-accent: 0 0% 100%;
    --fg-danger: 0 72% 51%;
    --fg-success: 142 71% 35%;

    --border-default: 220 13% 91%;
    --border-strong: 220 13% 80%;
    --border-focus: 221 83% 53%;

    --radius-sm: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;

    --shadow-sm: 0 1px 2px 0 hsl(220 18% 0% / 0.05);
    --shadow-md: 0 4px 6px -1px hsl(220 18% 0% / 0.08), 0 2px 4px -2px hsl(220 18% 0% / 0.04);

    --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

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

        --bg-base: 222 47% 8%;
        --bg-surface: 222 47% 11%;
        --bg-elevated: 222 47% 14%;
        --bg-muted: 220 14% 18%;
        --bg-accent: 221 83% 60%;
        --bg-accent-hover: 221 83% 67%;
        --bg-danger: 0 72% 60%;
        --bg-success: 142 71% 55%;

        --fg-primary: 210 40% 98%;
        --fg-secondary: 215 20% 75%;
        --fg-muted: 215 16% 60%;
        --fg-on-accent: 222 47% 11%;
        --fg-danger: 0 72% 70%;
        --fg-success: 142 71% 70%;

        --border-default: 220 14% 22%;
        --border-strong: 220 14% 32%;
        --border-focus: 221 83% 67%;

        --shadow-sm: 0 1px 2px 0 hsl(0 0% 0% / 0.4);
        --shadow-md: 0 4px 6px -1px hsl(0 0% 0% / 0.5), 0 2px 4px -2px hsl(0 0% 0% / 0.35);
    }
}

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

    --bg-base: 222 47% 8%;
    --bg-surface: 222 47% 11%;
    --bg-elevated: 222 47% 14%;
    --bg-muted: 220 14% 18%;
    --bg-accent: 221 83% 60%;
    --bg-accent-hover: 221 83% 67%;
    --bg-danger: 0 72% 60%;
    --bg-success: 142 71% 55%;

    --fg-primary: 210 40% 98%;
    --fg-secondary: 215 20% 75%;
    --fg-muted: 215 16% 60%;
    --fg-on-accent: 222 47% 11%;
    --fg-danger: 0 72% 70%;
    --fg-success: 142 71% 70%;

    --border-default: 220 14% 22%;
    --border-strong: 220 14% 32%;
    --border-focus: 221 83% 67%;

    --shadow-sm: 0 1px 2px 0 hsl(0 0% 0% / 0.4);
    --shadow-md: 0 4px 6px -1px hsl(0 0% 0% / 0.5), 0 2px 4px -2px hsl(0 0% 0% / 0.35);
}

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