/* ============================================
   SmartLearn Pro - Theme System
   Apple Human Interface Guidelines準拠
   ============================================ */

/* --- Light Mode (Default) --- */
:root {
    /* Background */
    --color-bg-primary: #FFFFFF;
    --color-bg-secondary: #F9FAFB;
    --color-bg-tertiary: #F3F4F6;
    --color-bg-elevated: #FFFFFF;

    /* Text */
    --color-text-primary: #111827;
    --color-text-secondary: #374151;
    --color-text-tertiary: #6B7280;
    --color-text-quaternary: #9CA3AF;

    /* Borders */
    --color-border-primary: #E5E7EB;
    --color-border-secondary: #D1D5DB;

    /* Accent (Blue) */
    --color-accent: #3B82F6;
    --color-accent-hover: #2563EB;
    --color-accent-active: #1D4ED8;
    --color-accent-bg: #EFF6FF;
    --color-accent-bg-hover: #DBEAFE;
    --color-accent-border: #BFDBFE;
    --color-accent-text: #1D4ED8;

    /* System Colors */
    --color-success: #10B981;
    --color-success-bg: #D1FAE5;
    --color-success-bg-alt: #ECFDF5;
    --color-success-border: #A7F3D0;
    --color-success-text: #047857;

    --color-warning: #F59E0B;
    --color-warning-bg: #FEF3C7;
    --color-warning-border: #FDE68A;
    --color-warning-text: #B45309;
    --color-warning-text-dark: #92400E;

    --color-danger: #EF4444;
    --color-danger-bg: #FEE2E2;
    --color-danger-bg-alt: #FEF2F2;
    --color-danger-border: #FECACA;
    --color-danger-text: #B91C1C;
    --color-danger-hover: #DC2626;

    --color-purple-bg: #EDE9FE;
    --color-purple-text: #6D28D9;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

    /* Overlay */
    --color-overlay: rgba(0, 0, 0, 0.5);

    /* Header */
    --color-header-bg: rgba(255, 255, 255, 0.95);

    /* Input */
    --color-input-bg: #FFFFFF;
    --color-input-border: #D1D5DB;
    --color-input-border-hover: #9CA3AF;
    --color-input-placeholder: #9CA3AF;
    --color-input-focus-ring: rgba(59, 130, 246, 0.2);

    /* Avatar gradient */
    --color-avatar-start: #3B82F6;
    --color-avatar-end: #8B5CF6;

    /* Completed lesson card */
    --color-completed-bg-start: #F0FDF4;
    --color-completed-bg-end: #DCFCE7;
    --color-completed-border: #86EFAC;
    --color-completed-border-hover: #4ADE80;

    /* Recommendation */
    --color-recommend-bg-start: #EFF6FF;
    --color-recommend-bg-end: #E0E7FF;
    --color-recommend-title: #1E40AF;

    /* Progress bar */
    --color-progress-bg: #E5E7EB;
    --color-progress-fill: #3B82F6;

    /* Code block */
    --color-code-bg: #1F2937;
    --color-code-text: #E5E7EB;

    /* Scrollbar */
    --color-scrollbar-track: #F3F4F6;
    --color-scrollbar-thumb: #D1D5DB;
    --color-scrollbar-thumb-hover: #9CA3AF;
}

/* --- Dark Mode Variables --- */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-bg-primary: #1C1C1E;
        --color-bg-secondary: #000000;
        --color-bg-tertiary: #2C2C2E;
        --color-bg-elevated: #2C2C2E;

        --color-text-primary: #F5F5F7;
        --color-text-secondary: #D1D1D6;
        --color-text-tertiary: #8E8E93;
        --color-text-quaternary: #636366;

        --color-border-primary: #38383A;
        --color-border-secondary: #48484A;

        --color-accent: #64A8FF;
        --color-accent-hover: #4D96FF;
        --color-accent-active: #3A86FF;
        --color-accent-bg: rgba(100, 168, 255, 0.15);
        --color-accent-bg-hover: rgba(100, 168, 255, 0.25);
        --color-accent-border: rgba(100, 168, 255, 0.3);
        --color-accent-text: #64A8FF;

        --color-success: #30D158;
        --color-success-bg: rgba(48, 209, 88, 0.15);
        --color-success-bg-alt: rgba(48, 209, 88, 0.1);
        --color-success-border: rgba(48, 209, 88, 0.3);
        --color-success-text: #30D158;

        --color-warning: #FFD60A;
        --color-warning-bg: rgba(255, 214, 10, 0.15);
        --color-warning-border: rgba(255, 214, 10, 0.3);
        --color-warning-text: #FFD60A;
        --color-warning-text-dark: #FFD60A;

        --color-danger: #FF453A;
        --color-danger-bg: rgba(255, 69, 58, 0.15);
        --color-danger-bg-alt: rgba(255, 69, 58, 0.1);
        --color-danger-border: rgba(255, 69, 58, 0.3);
        --color-danger-text: #FF453A;
        --color-danger-hover: #FF6961;

        --color-purple-bg: rgba(167, 139, 250, 0.15);
        --color-purple-text: #A78BFA;

        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
        --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
        --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.5);
        --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.6);

        --color-overlay: rgba(0, 0, 0, 0.7);

        --color-header-bg: rgba(28, 28, 30, 0.95);

        --color-input-bg: #1C1C1E;
        --color-input-border: #48484A;
        --color-input-border-hover: #636366;
        --color-input-placeholder: #636366;
        --color-input-focus-ring: rgba(100, 168, 255, 0.3);

        --color-avatar-start: #64A8FF;
        --color-avatar-end: #A78BFA;

        --color-completed-bg-start: rgba(48, 209, 88, 0.1);
        --color-completed-bg-end: rgba(48, 209, 88, 0.15);
        --color-completed-border: rgba(48, 209, 88, 0.3);
        --color-completed-border-hover: rgba(48, 209, 88, 0.5);

        --color-recommend-bg-start: rgba(100, 168, 255, 0.1);
        --color-recommend-bg-end: rgba(129, 140, 248, 0.1);
        --color-recommend-title: #64A8FF;

        --color-progress-bg: #38383A;
        --color-progress-fill: #64A8FF;

        --color-code-bg: #0D0D0D;
        --color-code-text: #D1D1D6;

        --color-scrollbar-track: #2C2C2E;
        --color-scrollbar-thumb: #48484A;
        --color-scrollbar-thumb-hover: #636366;

        color-scheme: dark;
    }
}

/* --- Dark Mode: Manual override --- */
[data-theme="dark"] {
    --color-bg-primary: #1C1C1E;
    --color-bg-secondary: #000000;
    --color-bg-tertiary: #2C2C2E;
    --color-bg-elevated: #2C2C2E;

    --color-text-primary: #F5F5F7;
    --color-text-secondary: #D1D1D6;
    --color-text-tertiary: #8E8E93;
    --color-text-quaternary: #636366;

    --color-border-primary: #38383A;
    --color-border-secondary: #48484A;

    --color-accent: #64A8FF;
    --color-accent-hover: #4D96FF;
    --color-accent-active: #3A86FF;
    --color-accent-bg: rgba(100, 168, 255, 0.15);
    --color-accent-bg-hover: rgba(100, 168, 255, 0.25);
    --color-accent-border: rgba(100, 168, 255, 0.3);
    --color-accent-text: #64A8FF;

    --color-success: #30D158;
    --color-success-bg: rgba(48, 209, 88, 0.15);
    --color-success-bg-alt: rgba(48, 209, 88, 0.1);
    --color-success-border: rgba(48, 209, 88, 0.3);
    --color-success-text: #30D158;

    --color-warning: #FFD60A;
    --color-warning-bg: rgba(255, 214, 10, 0.15);
    --color-warning-border: rgba(255, 214, 10, 0.3);
    --color-warning-text: #FFD60A;
    --color-warning-text-dark: #FFD60A;

    --color-danger: #FF453A;
    --color-danger-bg: rgba(255, 69, 58, 0.15);
    --color-danger-bg-alt: rgba(255, 69, 58, 0.1);
    --color-danger-border: rgba(255, 69, 58, 0.3);
    --color-danger-text: #FF453A;
    --color-danger-hover: #FF6961;

    --color-purple-bg: rgba(167, 139, 250, 0.15);
    --color-purple-text: #A78BFA;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.6);

    --color-overlay: rgba(0, 0, 0, 0.7);

    --color-header-bg: rgba(28, 28, 30, 0.95);

    --color-input-bg: #1C1C1E;
    --color-input-border: #48484A;
    --color-input-border-hover: #636366;
    --color-input-placeholder: #636366;
    --color-input-focus-ring: rgba(100, 168, 255, 0.3);

    --color-avatar-start: #64A8FF;
    --color-avatar-end: #A78BFA;

    --color-completed-bg-start: rgba(48, 209, 88, 0.1);
    --color-completed-bg-end: rgba(48, 209, 88, 0.15);
    --color-completed-border: rgba(48, 209, 88, 0.3);
    --color-completed-border-hover: rgba(48, 209, 88, 0.5);

    --color-recommend-bg-start: rgba(100, 168, 255, 0.1);
    --color-recommend-bg-end: rgba(129, 140, 248, 0.1);
    --color-recommend-title: #64A8FF;

    --color-progress-bg: #38383A;
    --color-progress-fill: #64A8FF;

    --color-code-bg: #0D0D0D;
    --color-code-text: #D1D1D6;

    --color-scrollbar-track: #2C2C2E;
    --color-scrollbar-thumb: #48484A;
    --color-scrollbar-thumb-hover: #636366;

    color-scheme: dark;
}

/* --- Scrollbar styling --- */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-scrollbar-track);
}

::-webkit-scrollbar-thumb {
    background: var(--color-scrollbar-thumb);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-scrollbar-thumb-hover);
}

/* --- Smooth theme transition --- */
body,
body * {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Disable transition on initial load (removed by theme.js) */
html.no-transition,
html.no-transition * {
    transition: none !important;
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
    body,
    body * {
        transition: none !important;
    }
}

/* --- Theme toggle button (dropdown version) --- */
.theme-toggle-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    background: none;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
    font-family: inherit;
}

.theme-toggle-btn:hover {
    background-color: var(--color-bg-tertiary);
    color: var(--color-text-primary);
}

.theme-toggle-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.theme-toggle-label {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    margin-left: auto;
    padding: 2px 8px;
    background: var(--color-bg-tertiary);
    border-radius: 4px;
}

/* --- Standalone toggle (login page / slide header) --- */
.theme-toggle-standalone {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border-primary);
    border-radius: 8px;
    cursor: pointer;
    color: var(--color-text-tertiary);
    transition: all 0.2s;
}

.theme-toggle-standalone:hover {
    background: var(--color-bg-elevated);
    color: var(--color-text-primary);
    border-color: var(--color-border-secondary);
}