/**
 * Aistros Light Theme
 * New Cyan/Turquoise, Yellow/Gold, Pink/Magenta Palette
 * Light Mode Color Overrides
 * @package Aistros
 * @since 1.2.1
 */

/* ========================================================================
   Light Theme Color Overrides
   Based on New Cyan/Turquoise, Yellow/Gold, Pink/Magenta Palette
   ======================================================================== */


/* Добавьте в самый верх :root (style.css) */

/* ---------- Тени ---------- */
--shadow-alpha: 12%; /* базовая прозрачность теней */
--shadow-alpha-hover: 22%;
/* ---------- Цвета состояний (берём из вашей палитры) ---------- */
--success-color: var(--primary-dark); /* 048883 */
--warning-color: var(--secondary-dark); /* DFC207 */
--danger-color: var(--accent-dark); /* A20580 */
--info-color: var(--primary-medium); /* 1FF9F1 */
/* ---------- Синтаксис CSS 4 для миксов (если нужен fallback) ---------- */
--primary-a10: color-mix(in srgb, var(--primary-base) 10%, transparent);
--primary-a15: color-mix(in srgb, var(--primary-base) 15%, transparent);
--primary-a25: color-mix(in srgb, var(--primary-base) 25%, transparent);
/* ---------- Тени, собранные из палитры ---------- */
--card-shadow:
0 2px 12px color-mix(in srgb, var(--primary-base) var(--shadow-alpha), transparent);
--card-shadow-hover:
0 4px 24px color-mix(in srgb, var(--primary-base) var(--shadow-alpha-hover), transparent);
/* ---------- Кнопки ---------- */
--button-bg-hover: var(--primary-medium); /* убираем захардкоженный #9A8BC7 */
--button-secondary-bg-hover: var(--primary-a10);
/* ---------- Формы ---------- */
--input-placeholder: color-mix(in srgb, var(--text-secondary) 70%, transparent);

:root {
    /* PRIMARY COLORS (Cyan/Turquoise) */
    --primary-base: #11FFF6; /* Основной цвет - яркий циан */
    --primary-light: #17FFF6; /* Светлый оттенок */
    --primary-medium: #1FF9F1; /* Средний оттенок */
    --primary-dark: #048883; /* Тёмный циан */
    --primary-darker: #146864; /* Очень тёмный циан */
    /* SECONDARY COLOR #1 (Yellow/Gold) */
    --secondary-base: #FFDF11; /* Ярко-жёлтый */
    --secondary-light: #FFE017; /* Светлый жёлтый */
    --secondary-medium: #FFE11F; /* Средний жёлтый */
    --secondary-dark: #DFC207; /* Тёмный жёлтый */
    --secondary-darker: #AA9821; /* Очень тёмный жёлтый/золотой */
    /* SECONDARY COLOR #2 (Pink/Magenta) */
    --accent-base: #FF11CB; /* Ярко-розовый/магентa */
    --accent-light: #FF17CC; /* Светлый розовый */
    --accent-medium: #FB1FCA; /* Средний розовый */
    --accent-dark: #A20580; /* Тёмный магентa */
    --accent-darker: #7C1866; /* Очень тёмный магентa */
    /* Нейтральные цвета для светлой темы */
    --neutral-white: #FFFFFF;
    --neutral-light: #F8F9FA;
    --neutral-medium: #E9ECEF;
    --neutral-dark: #6C757D;
    --neutral-darker: #343A40;
    /* Применяем к системным переменным */
    --primary-color: var(--primary-base);
    --primary-hover: var(--primary-medium);
    --secondary-color: var(--secondary-base);
    --secondary-hover: var(--secondary-medium);
    --text-primary: var(--neutral-darker);
    --text-secondary: var(--neutral-dark);
    --text-inverse: var(--neutral-white);
    --bg-body: var(--neutral-light);
    --bg-light: var(--neutral-white);
    --bg-card: var(--neutral-white);
    --border-color: var(--neutral-medium);
    --border-light: #F1F3F4;
    --border-dark: #DEE2E6;
    --link-color: var(--primary-dark);
    --link-hover-color: var(--primary-base);
    --link-card-bg: var(--neutral-white);
    --code-block-bg: #1A1D21;
    --code-block-text: #E9ECEF;
    /* Состояния */
    --success-color: #28A745;
    --warning-color: #FFC107;
    --danger-color: #DC3545;
    --info-color: #17A2B8;
    /* Специальные цвета для компонентов */
    --card-shadow: 0 2px 12px rgba(17, 255, 246, 0.15);
    --card-shadow-hover: 0 4px 20px rgba(17, 255, 246, 0.25);
    /* Цвета для навигации */
    --nav-bg: var(--neutral-white);
    --nav-border: var(--border-light);
    --nav-text: var(--text-secondary);
    --nav-text-hover: var(--primary-base);
    --nav-text-active: var(--primary-base);
    /* Цвета для кнопок */
    --button-bg: linear-gradient(135deg, var(--primary-base), var(--primary-medium));
    --button-bg-hover: linear-gradient(135deg, var(--primary-medium), var(--primary-base));
    --button-text: var(--text-inverse);
    --button-secondary-bg: transparent;
    --button-secondary-border: var(--primary-base);
    --button-secondary-text: var(--primary-base);
    --button-secondary-hover-bg: var(--primary-base);
    --button-secondary-hover-text: var(--text-inverse);
    /* Цвета для форм */
    --input-bg: var(--neutral-white);
    --input-border: var(--border-light);
    --input-border-focus: var(--primary-base);
    --input-text: var(--text-primary);
    --input-placeholder: var(--text-secondary);
}

/* ========================================================================
   Light Theme Specific Components - New Palette
   ======================================================================== */

/* Mystical background pattern with new colors */
body {
    background-image: radial-gradient(1px 1px at 20% 30%, rgba(17, 255, 246, 0.03) 0%, transparent 50%), radial-gradient(1px 1px at 60% 70%, rgba(255, 223, 17, 0.03) 0%, transparent 50%), radial-gradient(1px 1px at 50% 50%, rgba(255, 17, 203, 0.02) 0%, transparent 50%);
    background-size: 200% 200%;
    background-color: var(--bg-body);
}

/* Enhanced cards with cyan accents */
.card,
.aistros-card,
.wp-block-group {
    box-shadow: var(--card-shadow);
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    transition: all 0.3s ease;
}

    .card:hover,
    .aistros-card:hover {
        box-shadow: var(--card-shadow-hover);
        border-color: var(--primary-light);
        transform: translateY(-2px);
    }

/* Vibrant heading decorations */
h1::after,
.entry-title::after {
    background: linear-gradient(90deg, var(--primary-base), var(--secondary-base));
    height: 3px;
    border-radius: 2px;
}

/* Enhanced form styling */
input,
textarea,
select {
    background: var(--input-bg);
    border: 2px solid var(--input-border);
    color: var(--input-text);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

    input:focus,
    textarea:focus,
    select:focus {
        border-color: var(--input-border-focus);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-base) 15%, transparent);
    }

    /* Gradient buttons with cyan */
    button,
    .button,
    .btn,
    input[type="submit"],
    input[type="button"],
    .wp-block-button__link {
        background: var(--button-bg);
        color: var(--button-text);
        box-shadow: 0 2px 8px rgba(17, 255, 246, 0.3);
        transition: all 0.3s ease;
    }

        button:hover,
        .button:hover,
        .btn:hover,
        input[type="submit"]:hover,
        input[type="button"]:hover,
        .wp-block-button__link:hover {
            box-shadow: 0 4px 16px rgba(17, 255, 246, 0.4);
            transform: translateY(-1px);
        }

        /* Secondary buttons with gold accent */
        button.secondary,
        .button.secondary,
        .btn.secondary {
            background: var(--button-secondary-bg);
            color: var(--button-secondary-text);
            border: 2px solid var(--button-secondary-border);
        }

            button.secondary:hover,
            .button.secondary:hover,
            .btn.secondary:hover {
                background: var(--button-secondary-hover-bg);
                color: var(--button-secondary-hover-text);
                border-color: var(--button-secondary-hover-bg);
            }

/* Enhanced navigation with cyan */
.main-navigation {
    background: var(--nav-bg);
    border: 1px solid var(--nav-border);
    box-shadow: 0 2px 8px rgba(17, 255, 246, 0.1);
}

    .main-navigation a {
        color: var(--nav-text);
        transition: all 0.3s ease;
    }

        .main-navigation a:hover {
            color: var(--nav-text-hover);
            background: color-mix(in srgb, var(--primary-base) 10%, transparent);
        }

    .main-navigation .current-menu-item > a {
        color: var(--nav-text-active);
        background: color-mix(in srgb, var(--primary-base) 15%, transparent);
    }

/* Enhanced footer with gradient */
.site-footer {
    background: linear-gradient(135deg, var(--bg-light) 0%, var(--bg-body) 100%);
    border-top: 2px solid var(--border-color);
}

    .site-footer::before {
        background: linear-gradient(90deg, transparent, var(--primary-base), var(--secondary-base), transparent);
    }

.footer-widget {
    background: var(--link-card-bg);
    border: 1px solid var(--border-light);
    box-shadow: var(--aistros-shadow-sm);
}

    .footer-widget .widget-title {
        color: var(--primary-base);
        border-bottom: 2px solid var(--secondary-base);
    }

    .footer-widget a {
        color: var(--nav-text);
        transition: color 0.3s ease;
    }

        .footer-widget a:hover {
            color: var(--nav-text-hover);
        }

/* Code blocks with better contrast */
pre[class*="language-"] {
    background: var(--code-block-bg);
    color: var(--code-block-text);
    border: 1px solid var(--border-dark);
}

.code-copy-btn {
    background: var(--bg-light);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

    .code-copy-btn:hover {
        background: var(--border-color);
        color: var(--text-inverse);
    }

/* Scrollbar theming with cyan */
::-webkit-scrollbar-track {
    background: var(--bg-light);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, var(--primary-base), var(--primary-medium));
    border: 2px solid var(--bg-light);
}

    ::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(135deg, var(--primary-medium), var(--primary-base));
    }

/* Selection colors with cyan */
::selection {
    background: color-mix(in srgb, var(--primary-base) 20%, transparent);
    color: var(--text-primary);
}

/* Animations with new colors */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.6s ease-out;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    :root {
        --card-shadow: 0 1px 8px rgba(17, 255, 246, 0.1);
        --card-shadow-hover: 0 2px 16px rgba(17, 255, 246, 0.15);
    }
}

/* Print styles */
@media print {
    body {
        background: white;
        color: black;
    }

    .card,
    .aistros-card {
        box-shadow: none;
        border: 1px solid #ccc;
    }

    /* Скрыть анимации при печати */
    .fade-in,
    .glow,
    .float {
        animation: none !important;
    }
}