/* SpawnWeaver design tokens — the single source of visual truth for the dashboard.
   Light theme by default, dark via [data-theme="dark"] or the OS preference.
   Spacing rides a 4px scale; type is a modest modular scale. */

:root {
    /* Type */
    --font-sans: "Inter", -apple-system, "Segoe UI", system-ui, Roboto, sans-serif;
    --font-mono: ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;

    --text-xs: 12px;
    --text-sm: 13.5px;
    --text-base: 14.5px;
    --text-md: 16px;
    --text-lg: 18px;
    --text-xl: 22px;
    --text-2xl: 28px;

    /* Spacing (4px scale) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    /* Shape */
    --radius-sm: 6px;
    --radius: 8px;
    --radius-lg: 12px;

    /* Light theme */
    --bg: #f7f8fa;
    --surface: #ffffff;
    --surface-subtle: #f1f3f6;
    --inset: #0d1117;              /* code blocks stay dark in both themes */
    --border: #e4e7ec;
    --border-strong: #cdd3dc;

    --text: #17202a;
    --text-secondary: #52606f;
    --text-faint: #8b95a1;
    --text-inverse: #ffffff;

    --accent: #4f6bf5;
    --accent-hover: #3d55d6;
    --accent-soft: rgba(79, 107, 245, 0.09);
    --accent-text: #3d55d6;

    --ok: #16a34a;
    --ok-soft: rgba(22, 163, 74, 0.1);
    --warn: #d97706;
    --warn-soft: rgba(217, 119, 6, 0.12);
    --danger: #dc2626;
    --danger-soft: rgba(220, 38, 38, 0.09);

    --code-text: #dbe2ea;
    --code-comment: #7b8794;
    --code-accent: #7ea6ff;
    --code-string: #98d3a5;

    --shadow-sm: 0 1px 2px rgba(13, 18, 28, 0.05);
    --shadow: 0 1px 2px rgba(13, 18, 28, 0.05), 0 4px 16px rgba(13, 18, 28, 0.06);
    --shadow-lg: 0 4px 12px rgba(13, 18, 28, 0.08), 0 16px 40px rgba(13, 18, 28, 0.12);

    color-scheme: light;
}

/* Dark theme — explicit choice wins; otherwise follow the OS. */
[data-theme="dark"] {
    --bg: #0c0f14;
    --surface: #12161d;
    --surface-subtle: #171c25;
    --border: #232a34;
    --border-strong: #333d4b;

    --text: #e8edf3;
    --text-secondary: #a6b0bd;
    --text-faint: #6b7686;
    --text-inverse: #12161d;

    --accent: #6d86ff;
    --accent-hover: #8299ff;
    --accent-soft: rgba(109, 134, 255, 0.13);
    --accent-text: #8fa4ff;

    --ok: #34c26b;
    --ok-soft: rgba(52, 194, 107, 0.13);
    --warn: #eab308;
    --warn-soft: rgba(234, 179, 8, 0.13);
    --danger: #f26d6d;
    --danger-soft: rgba(242, 109, 109, 0.12);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.35), 0 16px 40px rgba(0, 0, 0, 0.4);

    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #0c0f14;
        --surface: #12161d;
        --surface-subtle: #171c25;
        --border: #232a34;
        --border-strong: #333d4b;

        --text: #e8edf3;
        --text-secondary: #a6b0bd;
        --text-faint: #6b7686;
        --text-inverse: #12161d;

        --accent: #6d86ff;
        --accent-hover: #8299ff;
        --accent-soft: rgba(109, 134, 255, 0.13);
        --accent-text: #8fa4ff;

        --ok: #34c26b;
        --ok-soft: rgba(52, 194, 107, 0.13);
        --warn: #eab308;
        --warn-soft: rgba(234, 179, 8, 0.13);
        --danger: #f26d6d;
        --danger-soft: rgba(242, 109, 109, 0.12);

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
        --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.3);
        --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.35), 0 16px 40px rgba(0, 0, 0, 0.4);

        color-scheme: dark;
    }
}