@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* 1. FONT CHUNG */
* {
    font-family: 'Inter', sans-serif;
}

html {
    font-size: clamp(13px, 1.2vw, 18px);
}

/* 2. BIẾN MÀU & GRADIENT */
:root {
    --primary-orange: #F85D1F;
    --primary-red: #E53E3E;
    --primary-gray: #4B5563;
    --primary-yellow: #FFD700;
    --primary-green: #38A169;
    --text-base: #333333;
    --text-muted: #666666;
    --text-inverse: #FFFFFF;
    --gradient-sunset: linear-gradient(135deg, #FF6B35 0%, #E53E3E 50%, #FFD700 100%);
    --gradient-fire: linear-gradient(135deg, #FF4500 0%, #FF6B35 50%, #FFD700 100%);
    --gradient-warm: linear-gradient(135deg, #FFA500 0%, #FF6B35 50%, #E53E3E 100%);
}

/* 3. Mặc định text color cho toàn trang */
body {
    color: var(--text-base);
    background-color: var(--text-inverse);
    font-size: 1rem;
}
/* Các mức độ text */
.text-muted {
    color: var(--text-muted);
}

.text-light {
    color: rgba(51, 51, 51, 0.6);
}

/* 5. Text utility classes */
.text-primary {
    color: var(--primary-orange) !important;
}

.text-secondary {
    color: var(--primary-red) !important;
}

.text-warning {
    color: var(--primary-yellow) !important;
}

.text-orange {
    color: var(--primary-orange) !important;
}

.text-green {
    color: var(--primary-green) !important;
}

.text-gray {
    color: var(--primary-gray) !important;
}

/* 6. Gradient text */
.text-gradient {
    background: var(--gradient-sunset);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}