/*
 * Design system tokens — light theme on :root, dark theme on .dark.
 * The `dark` class is toggled on <html> by the layouts' dark-mode scripts.
 */
:root {
    color-scheme: light;

    --color-surface-page: #f8fafc;
    --color-surface-card: #ffffff;
    --color-surface-raised: #ffffff;

    --color-content: #0f172a;
    --color-content-secondary: #475569;
    --color-content-muted: #94a3b8;
    --color-content-inverse: #ffffff;

    --color-primary: #4f46e5;
    --color-primary-hover: #4338ca;
    --color-primary-subtle: #eef2ff;
    --color-primary-on: #ffffff;

    --color-border: #e2e8f0;
    --color-border-strong: #cbd5e1;

    --color-intent-success: #059669;
    --color-intent-warning: #d97706;
    --color-intent-error: #e11d48;
    --color-intent-info: #0284c7;
}

.dark {
    color-scheme: dark;

    --color-surface-page: #020617;
    --color-surface-card: #0f172a;
    --color-surface-raised: #1e293b;

    --color-content: #f1f5f9;
    --color-content-secondary: #94a3b8;
    --color-content-muted: #64748b;
    --color-content-inverse: #020617;

    --color-primary: #818cf8;
    --color-primary-hover: #a5b4fc;
    --color-primary-subtle: #1e1b4b;
    --color-primary-on: #020617;

    --color-border: #1e293b;
    --color-border-strong: #334155;

    --color-intent-success: #34d399;
    --color-intent-warning: #fbbf24;
    --color-intent-error: #fb7185;
    --color-intent-info: #38bdf8;
}

/* Hide Alpine.js content until it initializes (prevents FOUC). */
[x-cloak] {
    display: none !important;
}

.htmx-indicator {
    display: none;
}
.htmx-request .htmx-indicator {
    display: inline-block;
}
.htmx-request.htmx-indicator {
    display: inline-block;
}