/*
Theme Name: School Child
Template: blocksy
Version: 2.4.0
Description: Кастомная тема для LMS Моя школа EDOBIZ. SPA-логин и SPA-дашборд с поддержкой светлой и тёмной темы.
Author: webtest.kz
*/

:root {
    /* Бренд */
    --color-black: #131313;
    --color-orange: #FD542F;
    --color-orange-hover: #E6431F;
    --color-orange-soft: rgba(253, 84, 47, 0.12);
    --color-white: #FFFFFF;

    /* SUCCESS / ERROR */
    --color-success: #10B981;
    --color-error: #EF4444;

    /* Шрифты */
    --font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Радиусы */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;

    /* Easing */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

    /* Sidebar — общий */
    --sidebar-bg: #131313;
    --sidebar-icon: rgba(255, 255, 255, 0.5);
    --sidebar-icon-hover: #FFFFFF;
    --sidebar-icon-active: #FD542F;
    --sidebar-width: 80px;

    --topbar-height: 80px;
}

/* ============================================
   СВЕТЛАЯ ТЕМА (по умолчанию)
   ============================================ */
:root,
[data-theme="light"] {
    --color-bg: #F5F6F8;
    --color-surface: #FFFFFF;
    --color-surface-2: #F5F6F8;
    --color-border: #E5E7EB;
    --color-border-strong: #D1D5DB;

    --color-text-primary: #131313;
    --color-text-secondary: #6B7280;
    --color-text-muted: #9CA3AF;

    --color-overlay: rgba(245, 246, 248, 0.5);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.08);
}

/* ============================================
   ТЁМНАЯ ТЕМА (премиум)
   ============================================ */
[data-theme="dark"] {
    color-scheme: dark;

    --color-bg: #0F0F0F;
    --color-surface: #1C1C1E;
    --color-surface-2: #2A2A2D;
    --color-border: #2E2E32;
    --color-border-strong: #3A3A3F;

    --color-text-primary: #F5F5F7;
    --color-text-secondary: #A1A1A6;
    --color-text-muted: #6E6E73;

    --color-overlay: rgba(15, 15, 15, 0.6);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5);

    /* В тёмной теме сайдбар чуть мягче, чем в светлой */
    --sidebar-bg: #0A0A0A;
}

/* Если система в тёмной и пользователь не сделал явный выбор — используем тёмную */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) {
        --color-bg: #0F0F0F;
        --color-surface: #1C1C1E;
        --color-surface-2: #2A2A2D;
        --color-border: #2E2E32;
        --color-border-strong: #3A3A3F;

        --color-text-primary: #F5F5F7;
        --color-text-secondary: #A1A1A6;
        --color-text-muted: #6E6E73;

        --color-overlay: rgba(15, 15, 15, 0.6);

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
        --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
        --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5);

        --sidebar-bg: #0A0A0A;
    }
}

/* ============================================
   ПЛАВНЫЙ ПЕРЕХОД ЦВЕТОВ при переключении темы
   ============================================ */
.school-dashboard,
.school-dashboard * {
    transition-property: background-color, border-color, color, box-shadow;
    transition-duration: 0.3s;
    transition-timing-function: var(--ease-out);
}

/* Не анимируем смену темы у элементов с собственными transition (кнопки и пр.) — они уже имеют свои переходы */
.school-dashboard .sd-btn,
.school-dashboard .sd-btn *,
.school-dashboard .sd-course-card,
.school-dashboard .sd-course-card *,
.school-dashboard input,
.school-dashboard button {
    transition-property: background-color, border-color, color, box-shadow, transform;
}