/* Color tokens — dark is the default; light swaps via html[data-theme="light"]. */

:root {
    color-scheme: dark;

    --color-page: #020617;
    --color-page-rgb: 2 6 23;
    --color-surface: #0f172a;
    --color-surface-rgb: 15 23 42;
    --color-surface-raised: #1e293b;
    --color-surface-raised-rgb: 30 41 59;
    --color-surface-hover: #1e293b;
    --color-surface-hover-rgb: 30 41 59;
    --color-control: #0f172a;
    --color-control-rgb: 15 23 42;
    --color-control-hover: #1e293b;
    --color-control-hover-rgb: 30 41 59;
    --color-field: #020617;
    --color-field-rgb: 2 6 23;

    --color-border: #1e293b;
    --color-border-rgb: 30 41 59;
    --color-border-strong: #334155;
    --color-border-strong-rgb: 51 65 85;
    --color-border-hover: #475569;
    --color-border-hover-rgb: 71 85 105;
    --color-border-subtle: #1e293b;

    --color-text: #f8fafc;
    --color-text-primary: #e2e8f0;
    --color-text-secondary: #cbd5e1;
    --color-text-muted: #94a3b8;
    --color-text-faint: #64748b;
    --color-text-dim: #475569;

    --color-accent: #fb923c;
    --color-accent-strong: #f97316;
    --color-accent-amber: #f59e0b;
    --color-accent-soft: #fdba74;
    --color-on-accent: #0f172a;
    --color-accent-glow: 249 115 22;

    --color-danger-bg: rgba(127, 29, 29, 0.2);
    --color-danger-bg-hover: rgba(220, 38, 38, 0.2);
    --color-danger-border: rgba(248, 113, 113, 0.28);
    --color-danger-border-hover: rgba(248, 113, 113, 0.45);
    --color-danger-text: #fca5a5;
    --color-danger-text-hover: #fee2e2;

    --color-shadow: rgba(2, 6, 23, 0.22);
    --color-shadow-strong: rgba(2, 6, 23, 0.45);
    --color-overlay: rgb(2 6 23 / 0.85);
    --color-inset-highlight: rgba(255, 255, 255, 0.03);

    --color-scrollbar-thumb: rgba(255, 255, 255, 0.12);

    --color-drink-glass: #cbd5e1;

    --color-auth-bg-top: rgba(249, 115, 22, 0.18);
    --color-auth-bg-mid: #020617;
    --color-auth-bg-bottom: #0f172a;

    --toast-bg-opacity: 1;
    --toast-surface: rgb(15 23 42 / var(--toast-bg-opacity));
    --toast-surface-flame: rgb(41 24 14 / var(--toast-bg-opacity));
    --toast-surface-alert: rgb(42 16 16 / var(--toast-bg-opacity));

    --color-theme-meta: #020617;
}

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

    --color-page: #f1f5f9;
    --color-page-rgb: 241 245 249;
    --color-surface: #ffffff;
    --color-surface-rgb: 255 255 255;
    --color-surface-raised: #f8fafc;
    --color-surface-raised-rgb: 248 250 252;
    --color-surface-hover: #f1f5f9;
    --color-surface-hover-rgb: 241 245 249;
    --color-control: #e2e8f0;
    --color-control-rgb: 226 232 240;
    --color-control-hover: #cbd5e1;
    --color-control-hover-rgb: 203 213 225;
    --color-field: #f1f5f9;
    --color-field-rgb: 241 245 249;

    --color-border: #cbd5e1;
    --color-border-rgb: 203 213 225;
    --color-border-strong: #94a3b8;
    --color-border-strong-rgb: 148 163 184;
    --color-border-hover: #64748b;
    --color-border-hover-rgb: 100 116 139;
    --color-border-subtle: #e2e8f0;

    --color-text: #0f172a;
    --color-text-primary: #1e293b;
    --color-text-secondary: #334155;
    --color-text-muted: #64748b;
    --color-text-faint: #64748b;
    --color-text-dim: #94a3b8;

    --color-accent: #ea580c;
    --color-accent-strong: #f97316;
    --color-accent-amber: #f59e0b;
    --color-accent-soft: #c2410c;
    --color-on-accent: #0f172a;
    --color-accent-glow: 234 88 12;

    --color-danger-bg: rgba(254, 226, 226, 0.9);
    --color-danger-bg-hover: rgba(254, 202, 202, 0.95);
    --color-danger-border: rgba(248, 113, 113, 0.45);
    --color-danger-border-hover: rgba(239, 68, 68, 0.55);
    --color-danger-text: #b91c1c;
    --color-danger-text-hover: #991b1b;

    --color-shadow: rgba(15, 23, 42, 0.08);
    --color-shadow-strong: rgba(15, 23, 42, 0.16);
    --color-overlay: rgb(15 23 42 / 0.45);
    --color-inset-highlight: rgba(255, 255, 255, 0.6);

    --color-scrollbar-thumb: rgba(15, 23, 42, 0.18);

    --color-drink-glass: #64748b;

    --color-auth-bg-top: rgba(249, 115, 22, 0.12);
    --color-auth-bg-mid: #f8fafc;
    --color-auth-bg-bottom: #e2e8f0;

    --toast-surface: rgb(255 255 255 / var(--toast-bg-opacity));
    --toast-surface-flame: rgb(255 247 237 / var(--toast-bg-opacity));
    --toast-surface-alert: rgb(254 242 242 / var(--toast-bg-opacity));

    --color-theme-meta: #f1f5f9;
}

/* Remap Tailwind slate utilities used across templates for light mode. */
html[data-theme="light"] .bg-slate-950 {
    background-color: rgb(var(--color-page-rgb) / 1);
}

html[data-theme="light"] .bg-slate-950\/85 {
    background-color: var(--color-overlay);
}

html[data-theme="light"] .bg-slate-950\/60 {
    background-color: rgb(var(--color-border-rgb) / 0.55);
}

html[data-theme="light"] .bg-slate-950\/40 {
    background-color: rgb(var(--color-border-rgb) / 0.45);
}

html[data-theme="light"] .bg-slate-900 {
    background-color: rgb(var(--color-surface-rgb) / 1);
}

html[data-theme="light"] .bg-slate-900\/95 {
    background-color: rgb(var(--color-surface-rgb) / 0.95);
}

html[data-theme="light"] .bg-slate-900\/50 {
    background-color: rgb(var(--color-surface-rgb) / 0.82);
}

html[data-theme="light"] .bg-slate-800 {
    background-color: rgb(var(--color-surface-raised-rgb) / 1);
}

html[data-theme="light"] .text-slate-100 {
    color: var(--color-text);
}

html[data-theme="light"] .text-slate-200 {
    color: var(--color-text-primary);
}

html[data-theme="light"] .text-slate-300 {
    color: var(--color-text-secondary);
}

html[data-theme="light"] .text-slate-400 {
    color: var(--color-text-muted);
}

html[data-theme="light"] .text-slate-500 {
    color: var(--color-text-faint);
}

html[data-theme="light"] .text-slate-950 {
    color: var(--color-on-accent);
}

html[data-theme="light"] .border-slate-800,
html[data-theme="light"] .border-slate-850,
html[data-theme="light"] .border-slate-900,
html[data-theme="light"] .border-slate-700 {
    border-color: rgb(var(--color-border-rgb) / 1);
}

html[data-theme="light"] .border-slate-900\/60 {
    border-color: rgb(var(--color-border-rgb) / 0.7);
}

html[data-theme="light"] .divide-slate-800 > :not([hidden]) ~ :not([hidden]) {
    border-color: rgb(var(--color-border-rgb) / 1);
}

html[data-theme="light"] .selection\:text-slate-950::selection {
    color: var(--color-on-accent);
}

/* Body page chrome — keep Tailwind utilities for layout; colors follow tokens. */
body {
    background-color: var(--color-page);
    color: var(--color-text);
}