/* === THEMES.CSS ===
 * assets/css/themes.css
 * НАЗНАЧЕНИЕ: Light/Dark тема переключение
 */

/* ============================================
   LIGHT THEME
   ============================================ */
html.light,
.light-theme {
    /* Background */
    --background: 0 0% 100%;
    --foreground: 222 47% 11%;

    /* Card */
    --card: 0 0% 100%;
    --card-foreground: 222 47% 11%;

    /* Primary (Cyan) - остается тем же */
    --primary: 187 94% 42%;
    --primary-foreground: 0 0% 100%;

    /* Secondary (Purple) - остается тем же */
    --secondary: 262 83% 58%;
    --secondary-foreground: 0 0% 100%;

    /* Muted */
    --muted: 210 40% 96%;
    --muted-foreground: 215 16% 47%;

    /* Accent */
    --accent: 210 40% 96%;
    --accent-foreground: 222 47% 11%;

    /* Destructive */
    --destructive: 0 72% 51%;
    --destructive-foreground: 0 0% 100%;

    /* Success */
    --success: 142 71% 45%;
    --success-foreground: 0 0% 100%;

    /* Warning */
    --warning: 38 92% 50%;
    --warning-foreground: 222 47% 11%;

    /* Border */
    --border: 214 32% 91%;
    --input: 214 32% 91%;
    --ring: 187 94% 42%;

    /* Surfaces */
    --surface-0: 0 0% 100%;
    --surface-1: 210 40% 98%;
    --surface-2: 210 40% 96%;
    --surface-3: 214 32% 91%;
    --surface-4: 215 20% 85%;

    /* Glow (приглушенный для светлой темы) */
    --glow-primary: 187 94% 42%;
    --glow-secondary: 262 83% 58%;
}

/* ============================================
   SYSTEM THEME (follows OS preference)
   ============================================ */
@media (prefers-color-scheme: light) {
    html.system {
        /* Light theme variables */
        --background: 0 0% 100%;
        --foreground: 222 47% 11%;
        --card: 0 0% 100%;
        --card-foreground: 222 47% 11%;
        --muted: 210 40% 96%;
        --muted-foreground: 215 16% 47%;
        --accent: 210 40% 96%;
        --accent-foreground: 222 47% 11%;
        --border: 214 32% 91%;
        --input: 214 32% 91%;
        --surface-0: 0 0% 100%;
        --surface-1: 210 40% 98%;
        --surface-2: 210 40% 96%;
        --surface-3: 214 32% 91%;
        --surface-4: 215 20% 85%;
    }
}

/* ============================================
   THEME TRANSITION
   ============================================ */
html {
    transition: background-color 0.3s ease, color 0.3s ease;
}

body,
.bg-background,
.bg-card,
.surface-0,
.surface-1,
.surface-2,
.surface-3,
.surface-4 {
    transition: background-color 0.3s ease;
}

.text-foreground,
.text-muted-foreground {
    transition: color 0.3s ease;
}

.border-border,
.border-input {
    transition: border-color 0.3s ease;
}