/* =====================================================
 * 🎨 CSS VARIABLES - Design System
 * EngViet Learn - Gam màu Pastel dễ chịu cho mắt
 * ===================================================== */

:root {
    /* === 🎨 MÀU CHÍNH (Primary Palette) === */
    --primary:          #6C5CE7;    /* Tím pastel - màu chủ đạo */
    --primary-light:    #A29BFE;    /* Tím nhạt */
    --primary-dark:     #5A4BD1;    /* Tím đậm */
    --primary-bg:       #EDE8FF;    /* Nền tím rất nhạt */
    --primary-rgb:      108, 92, 231;

    /* === 🟢 MÀU PHỤ (Secondary) === */
    --secondary:        #00B894;    /* Xanh mint */
    --secondary-light:  #55EFC4;    /* Xanh mint nhạt */
    --secondary-dark:   #009B7D;    /* Xanh mint đậm */
    --secondary-rgb:    0, 184, 148;

    /* === 📊 MÀU TRẠNG THÁI (Status Colors) === */
    --success:          #00B894;    /* Xanh - Thành công */
    --success-bg:       #D5F5ED;
    --warning:          #FDCB6E;    /* Vàng - Cảnh báo */
    --warning-bg:       #FFF8E7;
    --danger:           #E17055;    /* Cam đỏ - Lỗi */
    --danger-bg:        #FFEAEA;
    --info:             #74B9FF;    /* Xanh dương nhạt - Thông tin */
    --info-bg:          #E3F2FD;

    /* === ⭐ MÀU XP / GAMIFICATION === */
    --xp-gold:          #F9CA24;    /* Vàng XP */
    --streak-orange:    #F0932B;    /* Cam streak */
    --level-blue:       #0984E3;    /* Xanh level */
    --mastered-pink:    #FD79A8;    /* Hồng mastered */

    /* === 📝 MÀU VĂN BẢN (Text) === */
    --text-primary:     #2D3436;    /* Đen nhẹ - text chính */
    --text-secondary:   #636E72;    /* Xám - text phụ */
    --text-light:       #B2BEC3;    /* Xám nhạt - placeholder */
    --text-white:       #FFFFFF;

    /* === 🏠 MÀU NỀN (Background) === */
    --bg-primary:       #F8F9FD;    /* Nền chính - xám rất nhạt */
    --bg-secondary:     #FFFFFF;    /* Nền card/component */
    --bg-dark:          #2D3436;    /* Nền tối */
    --bg-gradient:      linear-gradient(135deg, #6C5CE7 0%, #A29BFE 100%);
    --bg-gradient-warm: linear-gradient(135deg, #FD79A8 0%, #FDCB6E 100%);
    --bg-gradient-cool: linear-gradient(135deg, #00B894 0%, #74B9FF 100%);

    /* === 📐 BORDER & SHADOW === */
    --border-color:     #E8E8E8;
    --border-light:     #F0F0F0;
    --border-radius-sm: 8px;
    --border-radius:    12px;
    --border-radius-lg: 16px;
    --border-radius-xl: 24px;
    --border-radius-full: 50%;

    --shadow-sm:        0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow:           0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-lg:        0 8px 32px rgba(0, 0, 0, 0.12);
    --shadow-xl:        0 12px 48px rgba(0, 0, 0, 0.16);
    --shadow-primary:   0 4px 16px rgba(108, 92, 231, 0.3);
    --shadow-success:   0 4px 16px rgba(0, 184, 148, 0.3);

    /* === 📏 SPACING === */
    --spacing-xs:       4px;
    --spacing-sm:       8px;
    --spacing-md:       16px;
    --spacing-lg:       24px;
    --spacing-xl:       32px;
    --spacing-2xl:      48px;

    /* === 🔤 TYPOGRAPHY === */
    --font-primary:     'Inter', 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display:     'Nunito', 'Inter', sans-serif;

    --font-size-xs:     0.75rem;    /* 12px */
    --font-size-sm:     0.875rem;   /* 14px */
    --font-size-base:   1rem;       /* 16px */
    --font-size-md:     1.125rem;   /* 18px */
    --font-size-lg:     1.25rem;    /* 20px */
    --font-size-xl:     1.5rem;     /* 24px */
    --font-size-2xl:    2rem;       /* 32px */
    --font-size-3xl:    2.5rem;     /* 40px */

    --font-weight-light:    300;
    --font-weight-normal:   400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;
    --font-weight-extrabold: 800;

    --line-height-tight:  1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* === ⏱️ TRANSITIONS === */
    --transition-fast:    0.15s ease;
    --transition:         0.3s ease;
    --transition-slow:    0.5s ease;
    --transition-bounce:  0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* === 📱 MOBILE LAYOUT === */
    --header-height:      56px;
    --bottom-nav-height:  64px;
    --safe-area-bottom:   env(safe-area-inset-bottom, 0px);
    --max-width-mobile:   480px;
    --max-width-tablet:   768px;
}