/* =============================================
   Custom Theme Color Variables
   ============================================= */
:root {
    --color-sandLight: #fafaf9;
    --color-slateDark: #0f172a;
    --color-brand-50:  #f0fdf9;
    --color-brand-100: #ccfbef;
    --color-brand-200: #99f6e0;
    --color-brand-300: #5eead4;
    --color-brand-400: #2dd4bf;
    --color-brand-500: #14b8a6;
    --color-brand-600: #0d9488;
    --color-brand-700: #0f766e;
    --color-brand-800: #115e59;
    --color-brand-900: #134e4a;
    --color-brand-950: #042f2e;
}

/* =============================================
   Background Color Overrides (force render)
   ============================================= */
.bg-sandLight { background-color: var(--color-sandLight) !important; }
.bg-slateDark { background-color: var(--color-slateDark) !important; }
.bg-brand-50  { background-color: var(--color-brand-50)  !important; }
.bg-brand-100 { background-color: var(--color-brand-100) !important; }
.bg-brand-200 { background-color: var(--color-brand-200) !important; }
.bg-brand-300 { background-color: var(--color-brand-300) !important; }
.bg-brand-400 { background-color: var(--color-brand-400) !important; }
.bg-brand-500 { background-color: var(--color-brand-500) !important; }
.bg-brand-600 { background-color: var(--color-brand-600) !important; }
.bg-brand-700 { background-color: var(--color-brand-700) !important; }
.bg-brand-800 { background-color: var(--color-brand-800) !important; }
.bg-brand-900 { background-color: var(--color-brand-900) !important; }
.bg-brand-950 { background-color: var(--color-brand-950) !important; }

/* =============================================
   Text Color Overrides — High Contrast
   Force all text to be clearly readable
   ============================================= */

/* Brand colors */
.text-brand-100 { color: var(--color-brand-100) !important; }
.text-brand-200 { color: var(--color-brand-200) !important; }
.text-brand-300 { color: var(--color-brand-300) !important; }
.text-brand-400 { color: var(--color-brand-400) !important; }
.text-brand-600 { color: var(--color-brand-600) !important; }
.text-brand-700 { color: var(--color-brand-700) !important; }
.text-brand-800 { color: var(--color-brand-800) !important; }
.text-brand-900 { color: var(--color-brand-900) !important; }
.text-brand-950 { color: var(--color-brand-950) !important; }

/* Slate scale — boosted contrast on light backgrounds */
.text-slate-300 { color: #94a3b8 !important; }   /* on dark bg only */
.text-slate-400 { color: #94a3b8 !important; }   /* acceptable only on dark bg */
.text-slate-500 { color: #334155 !important; }   /* was #64748b — much darker */
.text-slate-600 { color: #1e293b !important; }   /* was #475569 — near black */
.text-slate-700 { color: #0f172a !important; }   /* dark navy */
.text-slate-800 { color: #0f172a !important; }   /* same dark navy */
.text-slate-900 { color: #020617 !important; }   /* near black */

/* =============================================
   Border Color Overrides
   ============================================= */
.border-brand-100 { border-color: var(--color-brand-100) !important; }
.border-brand-200 { border-color: var(--color-brand-200) !important; }
.border-brand-300 { border-color: var(--color-brand-300) !important; }
.border-brand-700 { border-color: var(--color-brand-700) !important; }
.border-brand-800 { border-color: var(--color-brand-800) !important; }

/* =============================================
   Component Styles
   ============================================= */
.glass-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(20, 184, 166, 0.15);
}

.glass-dark {
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.gradient-text {
    background: linear-gradient(135deg, #0f766e 0%, #0d9488 50%, #2dd4bf 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.gradient-bg {
    background: linear-gradient(135deg, #042f2e 0%, #0f766e 100%);
}

.custom-shadow {
    box-shadow: 0 20px 40px -15px rgba(13, 148, 136, 0.12);
}

/* =============================================
   Animation
   ============================================= */
.pulse-slow {
    animation: pulseBg 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulseBg {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50%       { opacity: 0.6; transform: scale(1.05); }
}

/* =============================================
   Typography System
   Цели:
   - Минимальный размер читаемого текста: 14px (text-sm)
   - Описания карточек: 13.5px (золотая середина)
   - h1: 36–60px (адаптивно)
   - h2: 28–36px
   - h3 карточек: 18px
   - Базовый текст параграфов: 16px
   - Вспомогательные подписи/лейблы: 11–12px
   ============================================= */

/* --- Базовый размер тела страницы --- */
body { font-size: 16px; line-height: 1.6; }

/* --- Описания в карточках модулей (#skills) ---
   text-xs (12px) заменяем на 13.5px для читабельности */
#skills .p-6 p.text-xs,
#skills .p-6 p { font-size: 0.844rem; line-height: 1.65; }

/* --- Заголовки карточек модулей: text-lg достаточно --- */
#skills h3.text-lg { font-size: 1rem; }   /* 16px вместо 18px — плотнее в сетке 4 колонок */

/* --- Описания в карточках результатов (#results) ---
   text-xs → 13.5px */
#results .p-6 p.text-xs,
#results p.text-xs { font-size: 0.844rem; line-height: 1.65; }

/* --- Описания карточек «Что получают» (#program) ---
   text-sm (14px) оставляем, только увеличиваем интерлиньяж */
#program p.text-sm { line-height: 1.7; }

/* --- Тексты в блоке «Сквозные линии» --- */
#skills .rounded-3xl p.text-xs { font-size: 0.875rem; line-height: 1.65; }

/* --- Цитата в разделе #format --- */
#format p.text-lg { font-size: 1.125rem; line-height: 1.75; }

/* --- FAQ: ответы увеличиваем до 15px --- */
#faqAccordion div { font-size: 0.9375rem; line-height: 1.75; }

/* --- Аудиоплеер: подпись к треку --- */
#program .flex.items-center.justify-between { font-size: 0.8125rem; }

/* --- Карточки «Для кого»: подписи --- */
#audience p.text-sm { font-size: 0.9375rem; line-height: 1.7; }

/* --- Параграфы секций с описаниями секций (lead-text) --- */
section .text-center p.text-base,
section .text-center p.text-slate-600 { font-size: 1rem; line-height: 1.7; }

/* --- Параграф «о проекте» на тёмном фоне (#format) --- */
#format p.text-base { font-size: 1rem; line-height: 1.75; }

/* --- Тарифы: список опций --- */
#pricing ul.space-y-3 { font-size: 0.9375rem; }

/* =============================================
   Mobile Responsive Fixes (< 640px)
   ============================================= */
@media (max-width: 639px) {

    /* Шапка: не допускаем сжатия логотипа */
    header a.flex { min-width: 0; overflow: hidden; }
    header a .font-heading { font-size: 0.8rem; }

    /* Hero: одинаковые верхний и нижний отступы секции */
    #hero, section.relative.pt-10 { padding-top: 2rem; padding-bottom: 2rem; }

    /* Hero: заголовок h1 — не слишком крупный */
    h1.font-heading { font-size: 1.875rem !important; line-height: 1.15 !important; }

    /* Карточки навыков: паддинг поменьше */
    #skills .p-6 { padding: 1rem; }
    /* Описания возвращаем к читабельному минимуму на мобильном */
    #skills .p-6 p { font-size: 0.875rem; }

    /* Карточки Что получают: паддинг поменьше */
    #program .p-8 { padding: 1.25rem; }

    /* Карточки результатов: паддинг поменьше */
    #results .p-6 { padding: 1rem; }
    #results p.text-xs { font-size: 0.875rem; }

    /* Секция автора: паддинг карточки */
    #author .p-8 { padding: 1.25rem; }
    #author .sm\:p-12 { padding: 1.25rem; }

    /* Feature cards: иконка + бейдж без переполнения */
    #program .flex.items-start.justify-between { flex-wrap: wrap; gap: 0.5rem; }

    /* Форма: паддинг модального окна */
    #enrollModal > div { padding: 1.25rem; }

    /* FAQ: паддинг вопросов */
    #faqAccordion button { padding: 1rem 1.25rem; font-size: 1rem; }
    #faqAccordion div.px-6 { padding-left: 1.25rem; padding-right: 1.25rem; font-size: 0.9375rem; }

    /* Тарифы: ленточка "Выгодно" не выходит за карточку */
    #pricing .rotate-45 { right: -2.5rem; top: 1.5rem; font-size: 0.6rem; padding: 0.25rem 2.5rem; }

    /* Футер: столбцы на мобильном */
    footer .grid { gap: 1.5rem; }

    /* Секция автора: меньше шрифт заголовка */
    #author h2.text-3xl { font-size: 1.5rem; }

    /* Карточки «Для кого» на мобильном */
    #audience p.text-sm { font-size: 0.9375rem; }
}

/* =============================================
   Mobile Responsive Fixes (< 480px — мелкие телефоны)
   ============================================= */
@media (max-width: 479px) {
    /* Hero badge: перенос длинного текста */
    .inline-flex.items-center span.leading-snug { font-size: 0.65rem; }

    /* Шапка: ещё меньше шрифт названия */
    header a .font-heading { font-size: 0.72rem; }
    header a span.text-\[11px\] { font-size: 0.6rem; }

    /* Кнопки hero: ширина 100% */
    section .flex.flex-col a { font-size: 0.875rem; padding: 0.875rem 1.25rem; }

    /* Паддинги секций уменьшаем */
    section.py-12 { padding-top: 2.5rem; padding-bottom: 2.5rem; }

    /* h2 секций на очень маленьком экране */
    h2.font-heading { font-size: 1.5rem !important; }
}