html {
    scroll-behavior: smooth;
}

/* --- СИСТЕМНІ ЗМІННІ ТА ТЕМИ --- */
:root {
    /* Базова тема: Sich Dark (Emerald) */
    --bg-main: #020617;
    --accent-rgb: 16, 185, 129;
    --accent: rgb(var(--accent-rgb));
    
    /* Текст */
    --text-main: #94a3b8;      /* Основний текст */
    --text-title: #f8fafc;     /* Заголовки */
    --text-muted: #64748b;     /* Другорядний текст */
    
    /* Кнопки */
    --btn-primary-text: #020617;
    --btn-glass-text: #f8fafc;
    
    /* Ефекти */
    --glow-strength: 0.3;
    --hero-glow-opacity: 0.12;
    --card-bg: rgba(30, 41, 59, 0.4);
    --card-border: rgba(255, 255, 255, 0.08);
}

[data-theme="syndicate"] {
    --bg-main: #110202;
    --accent-rgb: 239, 68, 68;
    --hero-glow-opacity: 0.15;
}

[data-theme="engineering"] {
    --bg-main: #0c0a09;
    --accent-rgb: 245, 158, 11;
    --text-title: #fafaf9;
    --hero-glow-opacity: 0.15;
}

[data-theme="medical"] {
    --bg-main: #020a17;
    --accent-rgb: 14, 165, 233;
    --hero-glow-opacity: 0.12;
}

[data-theme="light"] {
    --bg-main: #f1f5f9;
    --text-main: #334155;
    --text-title: #0f172a;
    --text-muted: #64748b;
    --btn-primary-text: #ffffff;
    --btn-glass-text: #0f172a;
    --card-bg: rgba(255, 255, 255, 0.6);
    --card-border: rgba(15, 23, 42, 0.08);
    --hero-glow-opacity: 0.06;
}

[data-theme="light-medical"] {
    --bg-main: #f0f9ff;
    --accent-rgb: 14, 165, 233;
    --text-main: #0c4a6e;
    --text-title: #075985;
    --text-muted: #38bdf8;
    --btn-primary-text: #ffffff;
    --btn-glass-text: #075985;
    --card-bg: rgba(255, 255, 255, 0.8);
    --hero-glow-opacity: 0.08;
}

/* --- ГЛОБАЛЬНІ ПРАВИЛА --- */
body { 
    background-color: var(--bg-main); 
    color: var(--text-main);
    transition: background-color 0.5s ease, color 0.5s ease;
}

h1, h2, h3, h4 { 
    color: var(--text-title) !important; 
}

.text-accent { color: var(--accent); }
.bg-accent { background-color: var(--accent); }
.mono { font-family: 'JetBrains Mono', monospace; }

/* Кастомні класи */
.glass {
    background: var(--card-bg);
    backdrop-filter: blur(12px);
    border: 1px solid var(--card-border);
    transition: all 0.3s ease;
}

.hero-gradient {
    background-color: var(--bg-main);
    background-image: 
        linear-gradient(to bottom, transparent 60%, var(--bg-main) 100%),
        radial-gradient(circle at 50% 45%, rgba(var(--accent-rgb), var(--hero-glow-opacity)) 0%, transparent 75%);
    position: relative;
}

.shadow-glow {
    filter: drop-shadow(0 0 8px var(--accent));
}