/* ============================================
   QPhim - Biến CSS (CSS Variables)
   Quản lý theme Dark/Light và các giá trị dùng chung
   ============================================ */

/* === Giá trị dùng chung cho cả 2 theme === */
:root {
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Bo góc */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 50px;

    /* Hiệu ứng chuyển động */
    --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

    /* Layout */
    --header-height: 72px;
    --max-width: 1400px;

    /* Đổ bóng */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* === Theme Tối (Mặc định) === */
[data-theme="dark"] {
    /* Màu nền */
    --bg-primary: #0a0a0f;
    --bg-secondary: #12121a;
    --bg-card: #1a1a28;
    --bg-card-hover: #22223a;
    --bg-header: rgba(10, 10, 15, 0.85);
    --bg-input: rgba(255, 255, 255, 0.08);
    --bg-input-focus: rgba(255, 255, 255, 0.12);

    /* Màu chữ */
    --text-primary: #f0f0f5;
    --text-secondary: #9898b0;
    --text-muted: #5a5a78;

    /* Màu nhấn */
    --accent: #7c5cfc;
    --accent-hover: #9078ff;
    --accent-glow: rgba(124, 92, 252, 0.3);
    --accent-secondary: #00d4aa;

    /* Viền */
    --border: rgba(255, 255, 255, 0.06);
    --border-hover: rgba(255, 255, 255, 0.12);

    /* Gradient phủ hero */
    --overlay-gradient: linear-gradient(to top,
            var(--bg-primary) 0%,
            rgba(10, 10, 15, 0.8) 40%,
            transparent 100%);

    /* Đổ bóng card */
    --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);

    /* Thanh cuộn */
    --scrollbar-track: #1a1a28;
    --scrollbar-thumb: #2a2a45;

    /* Badge & nhãn */
    --badge-bg: rgba(124, 92, 252, 0.15);
    --badge-text: #a78bfa;
    --quality-bg: rgba(0, 212, 170, 0.15);
    --quality-text: #00d4aa;
    --rating-color: #fbbf24;
}

/* === Theme Sáng === */
[data-theme="light"] {
    /* Màu nền */
    --bg-primary: #f5f5fa;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-card-hover: #f0f0f8;
    --bg-header: rgba(255, 255, 255, 0.9);
    --bg-input: rgba(0, 0, 0, 0.05);
    --bg-input-focus: rgba(0, 0, 0, 0.08);

    /* Màu chữ */
    --text-primary: #1a1a2e;
    --text-secondary: #5a5a78;
    --text-muted: #9898b0;

    /* Màu nhấn */
    --accent: #6c3ce0;
    --accent-hover: #7c4dff;
    --accent-glow: rgba(108, 60, 224, 0.2);
    --accent-secondary: #00b890;

    /* Viền */
    --border: rgba(0, 0, 0, 0.08);
    --border-hover: rgba(0, 0, 0, 0.15);

    /* Gradient phủ hero */
    --overlay-gradient: linear-gradient(to top,
            var(--bg-primary) 0%,
            rgba(245, 245, 250, 0.8) 40%,
            transparent 100%);

    /* Đổ bóng card */
    --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);

    /* Thanh cuộn */
    --scrollbar-track: #e8e8f0;
    --scrollbar-thumb: #c8c8d8;

    /* Badge & nhãn */
    --badge-bg: rgba(108, 60, 224, 0.1);
    --badge-text: #6c3ce0;
    --quality-bg: rgba(0, 184, 144, 0.1);
    --quality-text: #00916e;
    --rating-color: #f59e0b;
}