/* ===== 1. CSS-ПЕРЕМЕННЫЕ (Тема) ===== */
:root {
    /* Цветовая схема */
    --background: 45 29% 97%;
    --primary: 357 34% 50%;
    --foreground: 253 14% 20%;
    --primary-foreground: 0 0% 100%;
    --secondary: 45 20% 90%;
    --secondary-foreground: 60 9% 20%;
    --muted: 75 20% 92%;
    --muted-foreground: 253 6% 50%;
    --accent: 38 40% 92%;
    --accent-foreground: 60 9% 20%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --border: 75 15% 85%;
    --input: 75 15% 85%;
    --ring: 77 26% 45%;
    --radius: 1rem;
    
    /* Типографика */
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --text-4xl: 2rem;
    --text-4xl--line-height: calc(2.25 / 2);
    --text-5xl: 2.5rem;
    --text-5xl--line-height: calc(2.25 / 2);
    --text-6xl: 3.25rem;
    --text-6xl--line-height: calc(2.25 / 2);
    
    /* Отступы и интервалы */
    --spacing: 0.25rem;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --tracking-tight: -0.025em;
    
    /* Веса шрифтов */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    
    /* Эффекты */
    --blur-2xl: 40px;
    --blur-3xl: 64px;
    --animate-in: enter 0.15s ease;
}

/* ===== 2. БАЗОВЫЕ СТИЛИ ===== */
* {
    /*border-color: hsl(var(--border)) !important;*/
}

body {
    background-color: hsl(var(--background)) !important;
    font-family: 'Inter', sans-serif !important;
    color: hsl(var(--foreground)) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ===== 2. СТИЛИ ЗАГОЛОВКОВ В КОНТЕНТЕ ===== */
main h1, main h2, main h3, main h4, main h5, main h6,
main h1 *, main h2 *, main h3 *, main h4 *, main h5 *, main h6 *,
[class*="font-heading"] {
    font-family: 'Manrope', sans-serif !important;
    letter-spacing: var(--tracking-tight) !important;
}
main h1:not([class*="text-"]) {
    font-size: 2.5rem;
    line-height: 1.2;
    margin-top: 1.75rem;
    margin-bottom: 1rem;
    font-weight: var(--font-weight-extrabold);
}
main h2:not([class*="text-"]) {
    font-size: 2rem;
    line-height: 1.25;
    margin-top: 1.75rem;
    margin-bottom: 1rem;
    font-weight: var(--font-weight-bold);
}
main h3:not([class*="text-"]) {
    font-size: 1.5rem;
    line-height: 1.3;
    margin-top: 1.75rem;
    margin-bottom: 1rem;
    font-weight: var(--font-weight-semibold);
}
main h4:not([class*="text-"]) {
    font-size: 1.25rem;
    line-height: 1.4;
    margin-top: 1.75rem;
    margin-bottom: 1rem;
    font-weight: var(--font-weight-semibold);
}
main h5:not([class*="text-"]) {
    font-size: 1.125rem;
    line-height: 1.5;
    margin-top: 1.75rem;
    margin-bottom: 1rem;
    font-weight: var(--font-weight-semibold);
}
main h6:not([class*="text-"]) {
    font-size: 1rem;
    line-height: 1.5;
    margin-top: 1.75rem;
    margin-bottom: 1rem;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
main h1:first-child,
main h2:first-child,
main h3:first-child,
main h4:first-child,
main h5:first-child,
main h6:first-child {
    margin-top: 0 !important;
}

/* ===== 3. СТИЛИ ПАРАГРАФОВ В КОНТЕНТЕ ===== */

main p {
    margin-top: 0;
    margin-bottom: 0.5rem;
    line-height: var(--leading-relaxed);
}

main p + p {
    margin-top: 0;
}

main ul + p, ol + p {
    margin-top: 1rem;
}

main ul, ol {
    margin-top: 0;
    margin-bottom: 0.5rem;
    padding-left: 1.5rem;
}

main ul {
    list-style-type: disc;
}

main ol {
    list-style-type: decimal;
}

main li {
    margin-bottom: 0.375rem;
    line-height: 1.6;
}

main .container p:last-child {
    margin-bottom: 0;
}

/* ===== 4. ТИПОГРАФИКА (Размеры текста) ===== */
main p a:not(.no-style-links *),
main li a:not(.no-style-links *),
main .content a:not(.no-style-links *),
main .article .prose a {
    color: hsl(var(--primary)); 
    text-decoration: underline;
    text-decoration-color: hsl(var(--primary) / 0.3);
    text-underline-offset: 2px;
    transition: all 0.2s ease;
    font-weight: var(--font-weight-medium);
}

main p a:hover:not(.no-style-links *),
main li a:hover:not(.no-style-links *),
main .content a:hover:not(.no-style-links *),
main article .prose a:hover {
    text-underline-offset: 3px;
}

main li a:not(.no-style-links *),
main article .prose a {
    display: inline-block;
}

main section a:not(.no-style-links *),
main article .prose a {
    color: hsl(var(--primary));
    text-decoration: underline;
    text-decoration-color: hsl(var(--primary) / 0.3);
    font-weight: var(--font-weight-medium);
    transition: all 0.2s ease;
}

main p a:hover:not(.no-style-links *),
main li a:hover:not(.no-style-links *),
main .content a:hover:not(.no-style-links *),
main section a:hover:not(.no-style-links *),
main article .prose a:hover {
    color: hsl(var(--primary) / 0.8);
    text-decoration-color: hsl(var(--primary) / 0.8);
}



/* Межстрочные интервалы */
.leading-tight { line-height: var(--leading-tight) !important; }
.leading-snug { line-height: var(--leading-snug) !important; }
.leading-normal { line-height: var(--leading-normal) !important; }
.leading-relaxed { line-height: var(--leading-relaxed) !important; }

/* ===== 5. ШРИФТЫ (Семейства и веса) ===== */
.font-heading { font-family: 'Manrope', sans-serif !important; }
.font-bold { font-weight: var(--font-weight-bold) !important; }
.font-extrabold { font-weight: var(--font-weight-extrabold) !important; }
.font-medium { font-weight: var(--font-weight-medium) !important; }
.font-semibold { font-weight: var(--font-weight-semibold) !important; }

/* ===== 6. ГЕОМЕТРИЯ (Радиусы, размеры, отступы) ===== */

/* Радиусы */
.rounded-2xl { border-radius: calc(var(--radius) + 16px) !important; }
.rounded-3xl { border-radius: calc(var(--radius) + 24px) !important; }
.rounded-xl { border-radius: calc(var(--radius) + 8px) !important; }
.rounded-lg { border-radius: var(--radius) !important; }
.rounded-md { border-radius: calc(var(--radius) - 2px) !important; }
.rounded-sm { border-radius: calc(var(--radius) - 4px) !important; }
.rounded-\[2\.5rem\] { border-radius: 2.5rem !important; }
.rounded-\[2rem\] { border-radius: 2rem !important; }
.rounded-t-\[2\.5rem\] { border-radius: 2.5rem 2.5rem 0 0 !important; }

/* Произвольные размеры */
.w-\[500px\] { width: 500px !important; }
.h-\[500px\] { height: 500px !important; }
.w-\[300px\] { width: 300px !important; }
.h-\[300px\] { height: 300px !important; }
.max-w-\[500px\] { max-width: 500px !important; }
.leading-\[1\.1\] { line-height: 1.15 !important; }

/* Отступы на основе переменной spacing */
.h-20 { height: calc(var(--spacing) * 20) !important; }
.w-10 { width: calc(var(--spacing) * 10) !important; }
.h-10 { height: calc(var(--spacing) * 10) !important; }
.w-12 { width: calc(var(--spacing) * 12) !important; }
.h-12 { height: calc(var(--spacing) * 12) !important; }
.w-14 { width: calc(var(--spacing) * 14) !important; }
.h-14 { height: calc(var(--spacing) * 14) !important; }
.min-h-9 { min-height: calc(var(--spacing) * 9) !important; }
.min-h-10 { min-height: calc(var(--spacing) * 10) !important; }

/* ===== 7. ЦВЕТА (Фон, текст, границы) ===== */

/* Фон */
.bg-background { background-color: hsl(var(--background)) !important; }
.bg-foreground { background-color: hsl(var(--foreground)) !important; }
.bg-foreground\/5 { background-color: hsl(var(--foreground) / 0.05) !important; }
.bg-foreground\/10 { background-color: hsl(var(--foreground) / 0.1) !important; }
.bg-primary { background-color: hsl(var(--primary)) !important; }
.bg-primary\/5 { background-color: hsl(var(--primary) / 0.05) !important; }
.bg-primary\/10 { background-color: hsl(var(--primary) / 0.1) !important; }
.bg-secondary\/30 { background-color: hsl(var(--secondary) / 0.3) !important; }
.bg-accent { background-color: hsl(var(--accent)) !important; }
.bg-accent\/30 { background-color: hsl(var(--accent) / 0.3) !important; }
.bg-muted { background-color: hsl(var(--muted)) !important; }
.bg-muted\/30 { background-color: hsl(var(--muted) / 0.3) !important; }
.bg-background\/80 { background-color: hsl(var(--background) / 0.8) !important; }
.bg-background\/10 { background-color: hsl(var(--background) / 0.1) !important; }
.bg-white\/10 { background-color: rgba(255, 255, 255, 0.1) !important; }
.bg-white\/50 { background-color: rgba(255, 255, 255, 0.5) !important; }
.bg-blue-100 { background-color: #dbeafe !important; }
.bg-border { background-color: hsl(var(--border)); }

/* Текст */
.text-foreground { color: hsl(var(--foreground)) !important; }
.text-foreground\/80 { color: hsl(var(--foreground) / 0.8) !important; }
.text-primary { color: hsl(var(--primary)) !important; }
.text-primary\/5 { color: hsl(var(--primary) / 0.05) !important; }
.text-primary\/7 { color: hsl(var(--primary) / 0.07) !important; }
.text-primary\/10 { color: hsl(var(--primary) / 0.1) !important; }
.text-primary\/30 { color: hsl(var(--primary) / 0.3) !important; }
.text-primary-foreground { color: hsl(var(--primary-foreground)) !important; }
.text-muted-foreground { color: hsl(var(--muted-foreground)) !important; }
.text-accent-foreground { color: hsl(var(--accent-foreground)) !important; }
.text-background { color: hsl(var(--background)) !important; }
.text-background\/50 { color: hsl(var(--background) / 0.5) !important; }
.text-background\/60 { color: hsl(var(--background) / 0.6) !important; }
.text-background\/70 { color: hsl(var(--background) / 0.7) !important; }
.text-white\/80 { color: rgba(255, 255, 255, 0.8) !important; }
.text-blue-800 { color: #1e40af !important; }

/* Границы */
.border-border { border-color: hsl(var(--border)) !important; }
.border-border\/40 { border-color: hsl(var(--border) / 0.4) !important; }
.border-border\/50 { border-color: hsl(var(--border) / 0.5) !important; }
.border-primary { border-color: hsl(var(--primary)) !important; }
.border-primary\/10 { border-color: hsl(var(--primary) / 0.1) !important; }
.border-primary\/20 { border-color: hsl(var(--primary) / 0.2) !important; }
.border-background\/10 { border-color: hsl(var(--background) / 0.1) !important; }
.border-foreground { border-color: hsl(var(--foreground)) !important; }
.border-foreground\/10 { border-color: hsl(var(--foreground) / 0.1) !important; }
.border-foreground\/20 { border-color: hsl(var(--foreground) / 0.2) !important; }
.border-foreground\/30 { border-color: hsl(var(--foreground) / 0.3) !important; }
.border-foreground\/50 { border-color: hsl(var(--foreground) / 0.5) !important; }

/* ===== 8. ЭФФЕКТЫ (Тени, размытия, градиенты) ===== */

/* Тени */
.shadow-2xl {
    --tw-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}

/* Размытия */
.blur-2xl { filter: blur(var(--blur-2xl)) !important; }
.blur-3xl { filter: blur(var(--blur-3xl)) !important; }

/* Градиенты */
.bg-gradient-to-t {
    --tw-gradient-position: to top in oklab !important;
    background-image: linear-gradient(var(--tw-gradient-stops)) !important;
}
.from-foreground\/40 {
    --tw-gradient-from: hsl(var(--foreground) / 0.4) !important;
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)) !important;
}
.to-transparent {
    --tw-gradient-to: transparent !important;
}

/* ===== 9. АНИМАЦИИ И ПЕРЕХОДЫ ===== */

/* Ключевые кадры */
@keyframes enter {
    from {
        opacity: var(--tw-enter-opacity, 1);
        transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
    }
}

/* Анимации */
.animate-in {
    animation: enter 0.15s ease !important;
}

.fade-in {
    --tw-enter-opacity: 0 !important;
}

.slide-in-from-bottom-4 {
    --tw-enter-translate-y: calc(4 * var(--spacing)) !important;
}

.slide-in-from-top-4 {
    --tw-enter-translate-y: calc(4 * var(--spacing) * -1) !important;
}

/* Задержки и длительности */
.delay-150 { transition-delay: 150ms !important; }
.delay-300 { transition-delay: 300ms !important; }
.duration-700 { transition-duration: 700ms !important; }

/* ===== 10. ИНТЕРАКТИВНОСТЬ (Hover-эффекты) ===== */

/* Эффекты при наведении на группу */
.group:hover .group-hover\:bg-primary {
    background-color: hsl(var(--primary)) !important;
}

.group:hover .group-hover\:text-white {
    color: #ffffff !important;
}

/* Эффекты при наведении на элемент */
.hover\:bg-white:hover {
    background-color: #ffffff !important;
}

.hover\:bg-primary\/5:hover {
    background-color: hsl(var(--primary) / 0.05) !important;
}

/* ===== 11. СПЕЦИАЛЬНЫЕ КЛАССЫ (Для иконок и т.д.) ===== */
[class*="inline-flex"] svg {
    width: 1rem !important;
    height: 1rem !important;
    flex-shrink: 0 !important;
    pointer-events: none !important;
}

/* ===== 12. МОБИЛЬНОЕ МЕНЮ ===== */

/* Стиль для шапки при открытом мобильном меню */
header.mobile-menu-open {
    background-color: hsl(var(--background)) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
header.mobile-menu-open #mobile-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
}

/* ===== 13. МЕДИА-ЗАПРОСЫ (Адаптивность) ===== */
@media (min-width: 768px) {
    .md\:text-2xl {
        font-size: var(--text-2xl) !important;
        line-height: var(--text-2xl--line-height) !important;
    }
    .md\:text-3xl {
        font-size: var(--text-3xl) !important;
        line-height: var(--text-3xl--line-height) !important;
    }
    .md\:text-4xl {
        font-size: var(--text-4xl) !important;
        line-height: var(--text-4xl--line-height) !important;
    }
    .md\:text-5xl {
        font-size: var(--text-5xl) !important;
        line-height: var(--text-5xl--line-height) !important;
    }
    .md\:text-sm {
        font-size: var(--text-sm) !important;
        line-height: var(--text-sm--line-height) !important;
    }
    .md\:left-6 {
        left: 1.25rem !important;
    }
}

@media (max-width: 768px) {
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.3rem; }
    h4 { font-size: 1.15rem; }
}
@media (min-width: 1024px) {
    .lg\:flex-row > .flex-1 {
        flex: 1 1 0% !important;
        width: auto !important;
        max-width: none !important;
    }
    
    .flex-1 {
        flex: 1 1 0% !important;
        min-width: 0 !important;
    }
    
    .lg\:text-6xl {
        font-size: var(--text-6xl) !important;
        line-height: var(--text-6xl--line-height) !important;
    }
}