/* === KZ-THEME.CSS === */
/* assets/css/kz-theme.css */
/* НАЗНАЧЕНИЕ: Дизайн-система КонтентБаза (OKLCH палитра флага Казахстана) */
/* ТЕМЫ: dark (default, "ночь над степью") + light (html.light-theme, "солнечный день") */
/* ШРИФТЫ: Unbounded (display), Onest (body), JetBrains Mono (mono) */
/* РАЗМЕР: ~260 строк */

/* === Загрузка шрифтов === */
@import url('https://api.fontshare.com/v2/css?f[]=unbounded@400,500,600,700,800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* === CSS Variables :root (DARK MODE, default) === */
:root {
    /* === ЦВЕТА ФЛАГА КАЗАХСТАНА (brand) === */
    --kz-sky:        oklch(78% 0.16 225);   /* Голубой флага (усилен для читаемости) */
    --kz-sky-deep:   oklch(45% 0.16 235);   /* Темно-голубой для градиентов */
    --kz-sky-night:  oklch(15% 0.08 240);   /* Темно-синий для ночного неба */
    --kz-sky-pale:   oklch(92% 0.05 230);   /* Бледно-голубой для light mode */

    --kz-gold:       oklch(82% 0.17 90);    /* Золотой флага */
    --kz-gold-deep:  oklch(68% 0.18 80);    /* Темное золото для CTA */
    --kz-gold-pale:  oklch(92% 0.08 95);    /* Бледное золото для hover */
    --kz-gold-glow:  oklch(82% 0.17 90 / 0.4); /* Для свечения/shadow */

    /* === DARK MODE фоны === */
    --bg-primary:    oklch(11% 0.04 240);   /* Очень темный сине-черный */
    --bg-secondary:  oklch(15% 0.05 240);   /* Темная карточка */
    --bg-tertiary:   oklch(20% 0.06 240);   /* Поднятая карточка */
    --bg-elevated:   oklch(24% 0.06 240);   /* Модалки, popovers */

    /* === Тексты === */
    --text-primary:    oklch(96% 0.01 90);  /* Теплый почти-белый */
    --text-secondary:  oklch(75% 0.02 90);
    --text-muted:      oklch(55% 0.02 240);
    --text-dim:        oklch(40% 0.02 240);

    /* === Акценты === */
    --accent-primary:   var(--kz-gold);
    --accent-secondary: var(--kz-sky);
    --accent-hover:     color-mix(in oklch, var(--kz-gold), white 15%);

    /* === Бордеры === */
    --border:         oklch(25% 0.05 240);
    --border-strong:  oklch(35% 0.06 240);
    --border-gold:    oklch(50% 0.12 85);

    /* === Градиенты === */
    --gradient-hero:        linear-gradient(135deg, oklch(11% 0.04 240) 0%, oklch(22% 0.10 230) 50%, oklch(15% 0.08 235) 100%);
    --gradient-gold:        linear-gradient(135deg, var(--kz-gold-deep) 0%, var(--kz-gold) 100%);
    --gradient-gold-radial: radial-gradient(circle at center, var(--kz-gold) 0%, transparent 70%);
    --gradient-card:        linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
    --gradient-night:       linear-gradient(180deg, oklch(11% 0.04 240) 0%, oklch(18% 0.08 235) 100%);

    /* === Тени === */
    --shadow-sm:   0 2px 8px oklch(0% 0 0 / 0.3);
    --shadow-md:   0 8px 24px oklch(0% 0 0 / 0.4);
    --shadow-lg:   0 16px 48px oklch(0% 0 0 / 0.5);
    --shadow-gold: 0 0 32px var(--kz-gold-glow);
    --shadow-glow: 0 0 64px oklch(70% 0.14 230 / 0.2);

    /* === Шрифты === */
    --font-display: 'Unbounded', system-ui, sans-serif;
    --font-body:    'Onest', system-ui, sans-serif;
    --font-mono:    'JetBrains Mono', 'Courier New', monospace;

    /* === Easing === */
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);

    /* === Layout === */
    --container-max: 1280px;
    --section-pad:   96px 24px;
    --header-h:      72px;
}

/* === LIGHT MODE ("солнечный день степи") === */
html.light-theme {
    --bg-primary:    oklch(98% 0.005 90);   /* Теплый почти-белый */
    --bg-secondary:  oklch(96% 0.01 90);
    --bg-tertiary:   oklch(94% 0.015 230);
    --bg-elevated:   oklch(100% 0 0);

    --text-primary:    oklch(20% 0.04 240); /* Темный синий вместо черного */
    --text-secondary:  oklch(35% 0.03 240);
    --text-muted:      oklch(50% 0.02 240);
    --text-dim:        oklch(65% 0.02 240);

    --accent-primary:   var(--kz-gold-deep);
    --accent-secondary: var(--kz-sky-deep);
    --accent-hover:     color-mix(in oklch, var(--kz-gold-deep), black 15%);

    --border:         oklch(88% 0.02 230);
    --border-strong:  oklch(78% 0.03 230);
    --border-gold:    var(--kz-gold-deep);

    --gradient-hero:  linear-gradient(135deg, oklch(98% 0.01 90) 0%, oklch(95% 0.05 230) 100%);
    --gradient-card:  linear-gradient(180deg, oklch(100% 0 0) 0%, oklch(97% 0.01 230) 100%);
    --gradient-night: linear-gradient(180deg, oklch(97% 0.02 90) 0%, oklch(93% 0.04 230) 100%);

    --shadow-sm:   0 2px 8px oklch(30% 0.05 240 / 0.08);
    --shadow-md:   0 8px 24px oklch(30% 0.05 240 / 0.12);
    --shadow-lg:   0 16px 48px oklch(30% 0.05 240 / 0.15);
    --shadow-gold: 0 0 32px oklch(68% 0.18 80 / 0.3);
    --shadow-glow: 0 0 64px oklch(70% 0.14 230 / 0.15);
}

/* === Base reset === */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    padding: 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-primary);
    background: var(--bg-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background-color 0.3s var(--ease-out-quart), color 0.3s var(--ease-out-quart);
}

img, svg { max-width: 100%; display: block; }
a { color: var(--accent-secondary); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--accent-primary); }

/* === Типографика === */
h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 16px;
    color: var(--text-primary);
    text-wrap: balance;
}
h1 { font-size: clamp(32px, 5.5vw, 64px); letter-spacing: -0.02em; }
h2 { font-size: clamp(28px, 4vw, 48px); letter-spacing: -0.015em; }
h3 { font-size: clamp(20px, 2.5vw, 28px); }
h4 { font-size: 18px; }

p { margin: 0 0 16px; text-wrap: pretty; }

/* === Размерная шкала === */
.text-xs  { font-size: 12px; line-height: 1.4; }
.text-sm  { font-size: 14px; line-height: 1.5; }
.text-base { font-size: 16px; line-height: 1.6; }
.text-lg  { font-size: 18px; line-height: 1.6; }
.text-xl  { font-size: 24px; line-height: 1.3; }
.text-2xl { font-size: 32px; line-height: 1.2; }
.text-3xl { font-size: 48px; line-height: 1.1; }
.text-4xl { font-size: 64px; line-height: 1.0; }
.text-5xl { font-size: 96px; line-height: 0.95; }

/* === Utility === */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding-left: 24px;
    padding-right: 24px;
}
.text-gold { color: var(--kz-gold); }
.text-sky  { color: var(--kz-sky); }
.font-mono { font-family: var(--font-mono); }
.uppercase { text-transform: uppercase; letter-spacing: 0.5px; }

/* === Scroll bar (dark only) === */
html:not(.light-theme) ::-webkit-scrollbar { width: 10px; height: 10px; }
html:not(.light-theme) ::-webkit-scrollbar-track { background: var(--bg-primary); }
html:not(.light-theme) ::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 5px;
}
html:not(.light-theme) ::-webkit-scrollbar-thumb:hover { background: var(--kz-gold-deep); }

/* === Selection === */
::selection {
    background: var(--kz-gold);
    color: oklch(15% 0.05 80);
}

/* === Focus visible === */
:focus-visible {
    outline: 2px solid var(--kz-gold);
    outline-offset: 2px;
    border-radius: 4px;
}

/* === Переключатель темы === */
.kz-theme-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color 0.2s, transform 0.2s var(--ease-out-quart), background 0.2s;
}
.kz-theme-btn:hover {
    border-color: var(--kz-gold);
    transform: rotate(15deg);
    background: var(--bg-tertiary);
}
.kz-theme-btn svg { width: 20px; height: 20px; }
.kz-icon-sun  { display: none; }
.kz-icon-moon { display: inline-block; }
html.light-theme .kz-icon-sun  { display: inline-block; }
html.light-theme .kz-icon-moon { display: none; }

/* === Анимации === */
@keyframes fade-up {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes pulse-glow {
    0%, 100% { box-shadow: var(--shadow-gold); }
    50%      { box-shadow: 0 0 48px var(--kz-gold-glow); }
}

/* === Reduced motion === */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}