/* Design tokens: shared visual primitives for themes and UI kit. */
:root {
    color-scheme: dark;

    --color-bg-page: #111827;
    --color-bg-app: #1e1e2e;
    --color-bg-surface: #2a2a3a;
    --color-bg-surface-raised: #303046;
    --color-bg-muted: #3a3a4a;
    --color-bg-input: #171724;
    --color-bg-overlay: rgba(5, 8, 20, 0.72);

    --color-text-primary: #ffffff;
    --color-text-secondary: #b8c0d8;
    --color-text-muted: #8f9bb3;
    --color-text-inverse: #ffffff;

    --color-border-subtle: rgba(255, 255, 255, 0.08);
    --color-border: #3a3a4a;
    --color-border-strong: #4a4a62;

    --color-accent: #667eea;
    --color-accent-hover: #7587ff;
    --color-accent-soft: rgba(102, 126, 234, 0.16);
    --color-accent-strong: #7f6bff;
    --color-danger: #f44336;
    --color-danger-hover: #ff5a50;
    --color-danger-soft: rgba(244, 67, 54, 0.16);
    --color-success: #4caf50;
    --color-warning: #ff9800;

    --shadow-sm: 0 6px 16px rgba(0, 0, 0, 0.16);
    --shadow-md: 0 14px 32px rgba(0, 0, 0, 0.28);
    --shadow-lg: 0 26px 70px rgba(4, 8, 18, 0.46);
    --shadow-accent: 0 12px 26px rgba(102, 126, 234, 0.28);
    --shadow-danger: 0 10px 22px rgba(244, 67, 54, 0.22);

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 999px;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;

    --duration-fast: 140ms;
    --duration-base: 200ms;
    --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
    --focus-ring: 0 0 0 4px rgba(102, 126, 234, 0.18);

    /* Legacy aliases kept so existing screens can migrate gradually. */
    --bg-primary: var(--color-bg-app);
    --bg-secondary: var(--color-bg-surface);
    --bg-tertiary: var(--color-bg-muted);
    --text-primary: var(--color-text-primary);
    --text-secondary: var(--color-text-secondary);
    --accent: var(--color-accent);
    --accent-hover: var(--color-accent-hover);
    --danger: var(--color-danger);
    --success: var(--color-success);
    --warning: var(--color-warning);
    --border: var(--color-border);
}

.theme-dark {
    color-scheme: dark;
}

.theme-light {
    color-scheme: light;

    --color-bg-page: #eef2f8;
    --color-bg-app: #f7f8fc;
    --color-bg-surface: #ffffff;
    --color-bg-surface-raised: #fdfdff;
    --color-bg-muted: #edf0f7;
    --color-bg-input: #ffffff;
    --color-bg-overlay: rgba(31, 41, 55, 0.34);

    --color-text-primary: #182033;
    --color-text-secondary: #526078;
    --color-text-muted: #75819a;
    --color-text-inverse: #ffffff;

    --color-border-subtle: rgba(24, 32, 51, 0.08);
    --color-border: #dce2ee;
    --color-border-strong: #c8d0df;

    --color-accent: #5267e8;
    --color-accent-hover: #4356ce;
    --color-accent-soft: rgba(82, 103, 232, 0.12);
    --color-accent-strong: #6556e8;
    --color-danger: #dc2626;
    --color-danger-hover: #b91c1c;
    --color-danger-soft: rgba(220, 38, 38, 0.11);
    --color-success: #15803d;
    --color-warning: #b45309;

    --shadow-sm: 0 6px 16px rgba(31, 41, 55, 0.08);
    --shadow-md: 0 14px 32px rgba(31, 41, 55, 0.12);
    --shadow-lg: 0 26px 70px rgba(31, 41, 55, 0.16);
    --shadow-accent: 0 12px 26px rgba(82, 103, 232, 0.18);
    --shadow-danger: 0 10px 22px rgba(220, 38, 38, 0.14);
    --focus-ring: 0 0 0 4px rgba(82, 103, 232, 0.14);
}