/* === THEMES-VARIABLES.CSS === */
/* assets/css/themes-variables.css */
/* НАЗНАЧЕНИЕ: CSS переменные для 5 эстетик x dark/light */
/* РАЗМЕР: ~300 строк */

/* --- Базовые fallback --- */
:root {
    --sm-accent-tertiary: var(--sm-accent-secondary);
    --sm-gradient-subtle: none;
    --sm-gradient-bg: none;
    --sm-glow: none;
}

/* === TERMINAL (Dev Terminal SaaS) === */
.theme-terminal {
    --sm-font-display: 'JetBrains Mono', monospace;
    --sm-font-body: 'Inter', sans-serif;
    /* DARK палитра */
    --sm-bg-primary: hsl(220, 15%, 4%);
    --sm-bg-secondary: hsl(220, 13%, 7%);
    --sm-bg-tertiary: hsl(220, 12%, 10%);
    --sm-border: hsl(220, 10%, 14%);
    --sm-text-primary: hsl(0, 0%, 93%);
    --sm-text-secondary: hsl(220, 8%, 55%);
    --sm-text-muted: hsl(220, 8%, 40%);
    --sm-accent: hsl(160, 84%, 39%);
    --sm-accent-hover: hsl(160, 84%, 45%);
    --sm-accent-muted: hsla(160, 84%, 39%, 0.12);
    --sm-accent-secondary: hsl(190, 90%, 45%);
    --sm-danger: hsl(0, 84%, 60%);
    --sm-warning: hsl(38, 92%, 50%);
    --sm-success: hsl(142, 71%, 45%);
    --sm-gradient: linear-gradient(135deg, hsl(160, 84%, 39%), hsl(190, 90%, 45%));
    --sm-radius: 4px;
    --sm-radius-lg: 6px;
    --sm-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    --sm-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.theme-terminal.light-theme {
    --sm-bg-primary: hsl(220, 20%, 98%);
    --sm-bg-secondary: hsl(0, 0%, 100%);
    --sm-bg-tertiary: hsl(220, 15%, 95%);
    --sm-border: hsl(220, 15%, 88%);
    --sm-text-primary: hsl(220, 20%, 10%);
    --sm-text-secondary: hsl(220, 10%, 45%);
    --sm-text-muted: hsl(220, 10%, 62%);
    --sm-accent: hsl(160, 84%, 32%);
    --sm-accent-hover: hsl(160, 84%, 28%);
    --sm-accent-muted: hsla(160, 84%, 39%, 0.08);
    --sm-accent-secondary: hsl(190, 90%, 35%);
    --sm-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    --sm-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* === SOFT (Sky Blue + Teal) === */
.theme-soft {
    --sm-font-display: 'Space Grotesk', sans-serif;
    --sm-font-body: 'DM Sans', sans-serif;
    --sm-bg-primary: hsl(210, 15%, 6%);
    --sm-bg-secondary: hsl(210, 12%, 9%);
    --sm-bg-tertiary: hsl(210, 10%, 13%);
    --sm-border: hsl(210, 10%, 16%);
    --sm-text-primary: hsl(0, 0%, 93%);
    --sm-text-secondary: hsl(210, 8%, 58%);
    --sm-text-muted: hsl(210, 8%, 42%);
    --sm-accent: hsl(200, 80%, 50%);
    --sm-accent-hover: hsl(200, 80%, 58%);
    --sm-accent-muted: hsla(200, 80%, 50%, 0.12);
    --sm-accent-secondary: hsl(172, 66%, 50%);
    --sm-danger: hsl(0, 84%, 60%);
    --sm-warning: hsl(38, 92%, 50%);
    --sm-success: hsl(142, 71%, 45%);
    --sm-gradient: linear-gradient(135deg, hsl(200, 80%, 50%), hsl(172, 66%, 50%));
    --sm-radius: 10px;
    --sm-radius-lg: 16px;
    --sm-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    --sm-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.25);
}
.theme-soft.light-theme {
    --sm-bg-primary: hsl(210, 25%, 98%);
    --sm-bg-secondary: hsl(0, 0%, 100%);
    --sm-bg-tertiary: hsl(210, 20%, 95%);
    --sm-border: hsl(210, 15%, 90%);
    --sm-text-primary: hsl(210, 25%, 10%);
    --sm-text-secondary: hsl(210, 12%, 42%);
    --sm-text-muted: hsl(210, 10%, 60%);
    --sm-accent: hsl(200, 80%, 42%);
    --sm-accent-hover: hsl(200, 80%, 35%);
    --sm-accent-muted: hsla(200, 80%, 50%, 0.08);
    --sm-accent-secondary: hsl(172, 66%, 40%);
    --sm-shadow: 0 2px 8px rgba(14, 165, 233, 0.06);
    --sm-shadow-lg: 0 8px 24px rgba(14, 165, 233, 0.1);
}

/* === PREMIUM (Золото + Бронза) === */
.theme-premium {
    --sm-font-display: 'Playfair Display', serif;
    --sm-font-body: 'Crimson Text', serif;
    --sm-bg-primary: hsl(30, 8%, 4%);
    --sm-bg-secondary: hsl(30, 7%, 7%);
    --sm-bg-tertiary: hsl(30, 6%, 11%);
    --sm-border: hsl(30, 6%, 15%);
    --sm-text-primary: hsl(40, 15%, 92%);
    --sm-text-secondary: hsl(30, 8%, 55%);
    --sm-text-muted: hsl(30, 6%, 40%);
    --sm-accent: hsl(42, 65%, 52%);
    --sm-accent-hover: hsl(42, 65%, 60%);
    --sm-accent-muted: hsla(42, 65%, 52%, 0.12);
    --sm-accent-secondary: hsl(25, 70%, 48%);
    --sm-danger: hsl(0, 60%, 50%);
    --sm-warning: hsl(38, 80%, 50%);
    --sm-success: hsl(142, 50%, 40%);
    --sm-gradient: linear-gradient(135deg, hsl(42, 65%, 52%), hsl(25, 70%, 48%));
    --sm-radius: 3px;
    --sm-radius-lg: 4px;
    --sm-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    --sm-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.4);
}
.theme-premium.light-theme {
    --sm-bg-primary: hsl(40, 30%, 97%);
    --sm-bg-secondary: hsl(40, 20%, 99%);
    --sm-bg-tertiary: hsl(40, 20%, 94%);
    --sm-border: hsl(40, 15%, 85%);
    --sm-text-primary: hsl(30, 20%, 10%);
    --sm-text-secondary: hsl(30, 12%, 40%);
    --sm-text-muted: hsl(30, 10%, 58%);
    --sm-accent: hsl(42, 65%, 42%);
    --sm-accent-hover: hsl(42, 65%, 35%);
    --sm-accent-muted: hsla(42, 65%, 52%, 0.08);
    --sm-accent-secondary: hsl(25, 70%, 38%);
    --sm-shadow: 0 2px 8px rgba(80, 60, 30, 0.08);
    --sm-shadow-lg: 0 8px 28px rgba(80, 60, 30, 0.12);
}

/* === GRADIENT (Синий + Фиолет + Циан) === */
.theme-gradient {
    --sm-font-display: 'Clash Display', 'Space Grotesk', sans-serif;
    --sm-font-body: 'DM Sans', sans-serif;
    --sm-bg-primary: hsl(230, 20%, 4%);
    --sm-bg-secondary: hsl(230, 16%, 8%);
    --sm-bg-tertiary: hsl(230, 14%, 12%);
    --sm-border: hsla(220, 80%, 60%, 0.1);
    --sm-text-primary: hsl(220, 20%, 95%);
    --sm-text-secondary: hsl(230, 12%, 58%);
    --sm-text-muted: hsl(230, 10%, 40%);
    --sm-accent: hsl(217, 91%, 60%);
    --sm-accent-hover: hsl(217, 91%, 68%);
    --sm-accent-muted: hsla(217, 91%, 60%, 0.12);
    --sm-accent-secondary: hsl(280, 70%, 62%);
    --sm-accent-tertiary: hsl(185, 80%, 55%);
    --sm-danger: hsl(0, 84%, 60%);
    --sm-warning: hsl(38, 92%, 50%);
    --sm-success: hsl(142, 71%, 45%);
    --sm-gradient: linear-gradient(135deg, hsl(217, 91%, 60%) 0%, hsl(280, 70%, 62%) 50%, hsl(185, 80%, 55%) 100%);
    --sm-gradient-subtle: linear-gradient(135deg, hsla(217, 91%, 60%, 0.05) 0%, hsla(280, 70%, 62%, 0.05) 100%);
    --sm-radius: 12px;
    --sm-radius-lg: 16px;
    --sm-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    --sm-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.4);
    --sm-glow: 0 0 30px hsla(217, 91%, 60%, 0.15);
}
.theme-gradient.light-theme {
    --sm-bg-primary: hsl(230, 25%, 98%);
    --sm-bg-secondary: hsl(0, 0%, 100%);
    --sm-bg-tertiary: hsl(230, 20%, 95%);
    --sm-border: hsl(230, 15%, 88%);
    --sm-text-primary: hsl(230, 25%, 10%);
    --sm-text-secondary: hsl(230, 12%, 42%);
    --sm-text-muted: hsl(230, 10%, 58%);
    --sm-accent: hsl(217, 91%, 50%);
    --sm-accent-hover: hsl(217, 91%, 42%);
    --sm-accent-muted: hsla(217, 91%, 60%, 0.08);
    --sm-accent-secondary: hsl(280, 70%, 50%);
    --sm-accent-tertiary: hsl(185, 80%, 40%);
    --sm-gradient: linear-gradient(135deg, hsl(217, 91%, 50%) 0%, hsl(280, 70%, 50%) 50%, hsl(185, 80%, 40%) 100%);
    --sm-gradient-subtle: linear-gradient(135deg, hsla(217, 91%, 50%, 0.04) 0%, hsla(280, 70%, 50%, 0.04) 100%);
    --sm-shadow: 0 2px 8px rgba(40, 60, 140, 0.08);
    --sm-shadow-lg: 0 8px 28px rgba(40, 60, 140, 0.12);
    --sm-glow: none;
}

/* === AURORA (Оранж + Розовый) === */
.theme-aurora {
    --sm-font-display: 'Outfit', sans-serif;
    --sm-font-body: 'Plus Jakarta Sans', sans-serif;
    --sm-bg-primary: hsl(260, 20%, 5%);
    --sm-bg-secondary: hsl(260, 15%, 8%);
    --sm-bg-tertiary: hsl(260, 12%, 12%);
    --sm-border: hsla(260, 20%, 30%, 0.2);
    --sm-text-primary: hsl(30, 20%, 95%);
    --sm-text-secondary: hsl(260, 10%, 60%);
    --sm-text-muted: hsl(260, 8%, 42%);
    --sm-accent: hsl(25, 95%, 55%);
    --sm-accent-hover: hsl(25, 95%, 62%);
    --sm-accent-muted: hsla(25, 95%, 55%, 0.12);
    --sm-accent-secondary: hsl(330, 80%, 58%);
    --sm-danger: hsl(0, 84%, 60%);
    --sm-warning: hsl(45, 92%, 55%);
    --sm-success: hsl(142, 60%, 45%);
    --sm-gradient: linear-gradient(135deg, hsl(25, 95%, 55%), hsl(330, 80%, 58%));
    --sm-gradient-bg: radial-gradient(ellipse at 20% 50%, hsla(25, 95%, 55%, 0.08) 0%, transparent 60%),
                      radial-gradient(ellipse at 80% 20%, hsla(330, 80%, 58%, 0.06) 0%, transparent 60%);
    --sm-radius: 8px;
    --sm-radius-lg: 14px;
    --sm-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    --sm-shadow-lg: 0 12px 36px rgba(0, 0, 0, 0.35);
}
.theme-aurora.light-theme {
    --sm-bg-primary: hsl(30, 30%, 98%);
    --sm-bg-secondary: hsl(30, 20%, 99%);
    --sm-bg-tertiary: hsl(30, 25%, 95%);
    --sm-border: hsl(30, 15%, 87%);
    --sm-text-primary: hsl(260, 20%, 10%);
    --sm-text-secondary: hsl(260, 10%, 40%);
    --sm-text-muted: hsl(260, 8%, 58%);
    --sm-accent: hsl(25, 95%, 45%);
    --sm-accent-hover: hsl(25, 95%, 38%);
    --sm-accent-muted: hsla(25, 95%, 55%, 0.08);
    --sm-accent-secondary: hsl(330, 80%, 48%);
    --sm-gradient: linear-gradient(135deg, hsl(25, 95%, 45%), hsl(330, 80%, 48%));
    --sm-gradient-bg: radial-gradient(ellipse at 20% 50%, hsla(25, 95%, 55%, 0.04) 0%, transparent 60%),
                      radial-gradient(ellipse at 80% 20%, hsla(330, 80%, 58%, 0.03) 0%, transparent 60%);
    --sm-shadow: 0 2px 8px rgba(120, 60, 20, 0.08);
    --sm-shadow-lg: 0 8px 28px rgba(120, 60, 20, 0.12);
}