:root {
    color-scheme: light;
    --app-gradient: linear-gradient(135deg, #f5f2fc, #e4e9f6 50%, #ede5f8);
    --app-glass-bg: rgba(255,255,255,.72);
    --app-glass-nested: rgba(255,255,255,.28);
    --app-glass-strong: rgba(250,248,255,.96);
    --app-glass-border: rgba(70,52,110,.18);
    --app-surface-solid: #f5f2fc;
    --app-glass-blur: 20px;
    --app-hover: rgba(92,67,155,.08);
    --app-shadow-sm: 0 4px 16px rgba(55,35,100,.08);
    --app-shadow-md: 0 8px 32px rgba(55,35,100,.12);
    --app-text: #252038;
    --app-text-secondary: #58516e;
    --app-tone-danger: #a51d32;
    --app-tone-warning: #805000;
    --app-tone-success: #126539;
    --app-tone-info: #22559c;
    --app-tone-accent: #65409d;
    --app-tone-neutral: #58516e;
}
html[data-theme="dark"] {
    color-scheme: dark;
    --app-gradient: linear-gradient(135deg, #0f0c29, #302b63 50%, #24243e);
    --app-glass-bg: rgba(38,32,82,.65);
    --app-glass-nested: rgba(150,135,220,.08);
    --app-glass-strong: rgba(35,29,72,.97);
    --app-glass-border: rgba(225,218,255,.18);
    --app-surface-solid: #262052;
    --app-hover: rgba(210,198,255,.10);
    --app-shadow-sm: 0 4px 16px rgba(0,0,0,.18);
    --app-shadow-md: 0 8px 32px rgba(0,0,0,.28);
    --app-text: #f5f3ff;
    --app-text-secondary: #c5bfdf;
    --app-tone-danger: #ffacb7;
    --app-tone-warning: #ffd699;
    --app-tone-success: #95e8b8;
    --app-tone-info: #aed5ff;
    --app-tone-accent: #d4bdff;
    --app-tone-neutral: #d0cae6;
}
:root {
    --app-danger-bg: color-mix(in srgb, var(--app-tone-danger) 12%, var(--app-glass-bg));
    --app-success-bg: color-mix(in srgb, var(--app-tone-success) 12%, var(--app-glass-bg));
    --app-warning-bg: color-mix(in srgb, var(--app-tone-warning) 12%, var(--app-glass-bg));
    --app-info-bg: color-mix(in srgb, var(--app-tone-info) 12%, var(--app-glass-bg));
}
/* Declare dependent tokens on both roots: inherited computed values must follow the mode. */
html[data-theme] {
    --app-danger-bg: color-mix(in srgb, var(--app-tone-danger) 12%, var(--app-glass-bg));
    --app-success-bg: color-mix(in srgb, var(--app-tone-success) 12%, var(--app-glass-bg));
    --app-warning-bg: color-mix(in srgb, var(--app-tone-warning) 12%, var(--app-glass-bg));
    --app-info-bg: color-mix(in srgb, var(--app-tone-info) 12%, var(--app-glass-bg));
}