/* ==================== COLOR SYSTEM COMPONENT ==================== */
/* 
   TipsterOS Color System
   Usage: Import this file in any page to use consistent colors
   Classes: .color-primary, .bg-primary, .text-primary, etc.
*/

:root {
    /* ===== PRIMARY COLORS ===== */
    --color-primary: #f2a83a;
    --color-primary-light: #f5b84d;
    --color-primary-dark: #e5982b;
    --color-primary-bg: rgba(242, 168, 58, 0.1);
    --color-primary-bg-strong: rgba(242, 168, 58, 0.2);
    
    /* ===== SECONDARY COLORS ===== */
    --color-secondary: #1f2a44;
    --color-secondary-light: #2d3a5e;
    --color-secondary-dark: #141c30;
    --color-secondary-bg: rgba(31, 42, 68, 0.1);
    
    /* ===== SUCCESS COLORS ===== */
    --color-success: #10b981;
    --color-success-light: #34d399;
    --color-success-dark: #059669;
    --color-success-bg: rgba(16, 185, 129, 0.1);
    
    /* ===== ERROR COLORS ===== */
    --color-error: #ef4444;
    --color-error-light: #f87171;
    --color-error-dark: #dc2626;
    --color-error-bg: rgba(239, 68, 68, 0.1);
    
    /* ===== WARNING COLORS ===== */
    --color-warning: #f59e0b;
    --color-warning-light: #fbbf24;
    --color-warning-dark: #d97706;
    --color-warning-bg: rgba(245, 158, 11, 0.1);
    
    /* ===== INFO COLORS ===== */
    --color-info: #3b82f6;
    --color-info-light: #60a5fa;
    --color-info-dark: #2563eb;
    --color-info-bg: rgba(59, 130, 246, 0.1);
    
    /* ===== NEUTRAL COLORS ===== */
    --color-white: #ffffff;
    --color-gray-50: #f8fafc;
    --color-gray-100: #f1f5f9;
    --color-gray-200: #e2e8f0;
    --color-gray-300: #cbd5e1;
    --color-gray-400: #94a3b8;
    --color-gray-500: #64748b;
    --color-gray-600: #475569;
    --color-gray-700: #334155;
    --color-gray-800: #1e293b;
    --color-gray-900: #0f172a;
    --color-black: #000000;
    
    /* ===== BACKGROUND COLORS ===== */
    --bg-primary: linear-gradient(135deg, #f8fafc 0%, #eef2f6 100%);
    --bg-card: #ffffff;
    --bg-modal: rgba(0, 0, 0, 0.5);
    --bg-footer: rgba(15, 23, 42, 0.95);
    
    /* ===== GRADIENT PRESETS ===== */
    --gradient-primary: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    --gradient-secondary: linear-gradient(135deg, var(--color-secondary), var(--color-secondary-light));
    --gradient-success: linear-gradient(135deg, var(--color-success), var(--color-success-dark));
    --gradient-error: linear-gradient(135deg, var(--color-error), var(--color-error-dark));
    --gradient-warning: linear-gradient(135deg, var(--color-warning), var(--color-warning-dark));
    --gradient-info: linear-gradient(135deg, var(--color-info), var(--color-info-dark));
    --gradient-dark: linear-gradient(135deg, var(--color-gray-800), var(--color-gray-900));
    --gradient-hero: linear-gradient(135deg, #1f2a44, #2d3a5e);
    
    /* ===== SHADOW PRESETS ===== */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --shadow-primary: 0 4px 12px rgba(242, 168, 58, 0.3);
    --shadow-success: 0 4px 12px rgba(16, 185, 129, 0.3);
    --shadow-error: 0 4px 12px rgba(239, 68, 68, 0.3);
}

/* ===== TEXT COLORS ===== */
.text-primary { color: var(--color-primary); }
.text-primary-light { color: var(--color-primary-light); }
.text-primary-dark { color: var(--color-primary-dark); }
.text-secondary { color: var(--color-secondary); }
.text-secondary-light { color: var(--color-secondary-light); }
.text-success { color: var(--color-success); }
.text-error { color: var(--color-error); }
.text-warning { color: var(--color-warning); }
.text-info { color: var(--color-info); }
.text-white { color: var(--color-white); }
.text-gray-50 { color: var(--color-gray-50); }
.text-gray-100 { color: var(--color-gray-100); }
.text-gray-200 { color: var(--color-gray-200); }
.text-gray-300 { color: var(--color-gray-300); }
.text-gray-400 { color: var(--color-gray-400); }
.text-gray-500 { color: var(--color-gray-500); }
.text-gray-600 { color: var(--color-gray-600); }
.text-gray-700 { color: var(--color-gray-700); }
.text-gray-800 { color: var(--color-gray-800); }
.text-gray-900 { color: var(--color-gray-900); }
.text-black { color: var(--color-black); }

/* ===== BACKGROUND COLORS ===== */
.bg-primary { background: var(--color-primary); }
.bg-primary-light { background: var(--color-primary-light); }
.bg-primary-dark { background: var(--color-primary-dark); }
.bg-primary-bg { background: var(--color-primary-bg); }
.bg-primary-bg-strong { background: var(--color-primary-bg-strong); }
.bg-secondary { background: var(--color-secondary); }
.bg-secondary-light { background: var(--color-secondary-light); }
.bg-success { background: var(--color-success); }
.bg-success-bg { background: var(--color-success-bg); }
.bg-error { background: var(--color-error); }
.bg-error-bg { background: var(--color-error-bg); }
.bg-warning { background: var(--color-warning); }
.bg-warning-bg { background: var(--color-warning-bg); }
.bg-info { background: var(--color-info); }
.bg-info-bg { background: var(--color-info-bg); }
.bg-white { background: var(--color-white); }
.bg-gray-50 { background: var(--color-gray-50); }
.bg-gray-100 { background: var(--color-gray-100); }
.bg-gray-200 { background: var(--color-gray-200); }
.bg-gray-300 { background: var(--color-gray-300); }
.bg-gray-400 { background: var(--color-gray-400); }
.bg-gray-500 { background: var(--color-gray-500); }
.bg-gray-600 { background: var(--color-gray-600); }
.bg-gray-700 { background: var(--color-gray-700); }
.bg-gray-800 { background: var(--color-gray-800); }
.bg-gray-900 { background: var(--color-gray-900); }
.bg-black { background: var(--color-black); }
.bg-transparent { background: transparent; }

/* ===== GRADIENT BACKGROUNDS ===== */
.bg-gradient-primary { background: var(--gradient-primary); }
.bg-gradient-secondary { background: var(--gradient-secondary); }
.bg-gradient-success { background: var(--gradient-success); }
.bg-gradient-error { background: var(--gradient-error); }
.bg-gradient-warning { background: var(--gradient-warning); }
.bg-gradient-info { background: var(--gradient-info); }
.bg-gradient-dark { background: var(--gradient-dark); }
.bg-gradient-hero { background: var(--gradient-hero); }
.bg-gradient-page { background: var(--bg-primary); }

/* ===== BORDER COLORS ===== */
.border-primary { border-color: var(--color-primary); }
.border-primary-light { border-color: var(--color-primary-light); }
.border-secondary { border-color: var(--color-secondary); }
.border-success { border-color: var(--color-success); }
.border-error { border-color: var(--color-error); }
.border-warning { border-color: var(--color-warning); }
.border-info { border-color: var(--color-info); }
.border-gray-200 { border-color: var(--color-gray-200); }
.border-gray-300 { border-color: var(--color-gray-300); }
.border-white { border-color: var(--color-white); }

/* ===== SHADOW CLASSES ===== */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-2xl { box-shadow: var(--shadow-2xl); }
.shadow-primary { box-shadow: var(--shadow-primary); }
.shadow-success { box-shadow: var(--shadow-success); }
.shadow-error { box-shadow: var(--shadow-error); }
.shadow-none { box-shadow: none; }

/* ===== HOVER EFFECTS ===== */
.hover\:bg-primary:hover { background: var(--color-primary-dark); }
.hover\:bg-primary-light:hover { background: var(--color-primary-light); }
.hover\:bg-secondary:hover { background: var(--color-secondary-light); }
.hover\:text-primary:hover { color: var(--color-primary); }
.hover\:text-white:hover { color: var(--color-white); }
.hover\:shadow-lg:hover { box-shadow: var(--shadow-lg); }
.hover\:shadow-primary:hover { box-shadow: var(--shadow-primary); }
.hover\:scale-105:hover { transform: scale(1.05); }
.hover\:translate-x-1:hover { transform: translateX(4px); }
.hover\:-translate-y-1:hover { transform: translateY(-2px); }

/* ===== ACTIVE STATES ===== */
.active\:scale-95:active { transform: scale(0.95); }
.active\:bg-primary-dark:active { background: var(--color-primary-dark); }

/* ===== TRANSITIONS ===== */
.transition-all { transition: all 0.3s ease; }
.transition-colors { transition: color 0.2s ease, background 0.2s ease, border 0.2s ease; }
.transition-transform { transition: transform 0.2s ease; }
.transition-shadow { transition: box-shadow 0.2s ease; }

/* ===== BUTTON VARIATIONS ===== */
.btn-primary {
    background: var(--gradient-primary);
    color: var(--color-secondary);
    border: none;
    transition: all 0.3s ease;
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-primary);
}

.btn-secondary {
    background: var(--gradient-secondary);
    color: var(--color-white);
    border: none;
    transition: all 0.3s ease;
}
.btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-success {
    background: var(--gradient-success);
    color: var(--color-white);
    border: none;
}
.btn-success:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-success);
}

.btn-error {
    background: var(--gradient-error);
    color: var(--color-white);
    border: none;
}
.btn-error:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-error);
}

.btn-outline-primary {
    background: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    transition: all 0.3s ease;
}
.btn-outline-primary:hover {
    background: var(--color-primary);
    color: var(--color-secondary);
}

.btn-ghost {
    background: transparent;
    color: var(--color-gray-600);
    border: none;
}
.btn-ghost:hover {
    background: var(--color-gray-100);
    color: var(--color-primary);
}

/* ===== BADGE VARIATIONS ===== */
.badge-primary {
    background: var(--color-primary-bg);
    color: var(--color-primary);
    padding: 4px 12px;
    border-radius: 60px;
    font-size: 0.75rem;
    font-weight: 600;
}
.badge-success {
    background: var(--color-success-bg);
    color: var(--color-success);
    padding: 4px 12px;
    border-radius: 60px;
    font-size: 0.75rem;
    font-weight: 600;
}
.badge-error {
    background: var(--color-error-bg);
    color: var(--color-error);
    padding: 4px 12px;
    border-radius: 60px;
    font-size: 0.75rem;
    font-weight: 600;
}
.badge-warning {
    background: var(--color-warning-bg);
    color: var(--color-warning);
    padding: 4px 12px;
    border-radius: 60px;
    font-size: 0.75rem;
    font-weight: 600;
}
.badge-info {
    background: var(--color-info-bg);
    color: var(--color-info);
    padding: 4px 12px;
    border-radius: 60px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* ===== CARD STYLES ===== */
.card {
    background: var(--color-white);
    border-radius: 24px;
    padding: 24px;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-gray-200);
    transition: all 0.3s ease;
}
.card:hover {
    box-shadow: var(--shadow-xl);
    transform: translateY(-4px);
}

/* ===== INPUT STYLES ===== */
.input-primary {
    border: 2px solid var(--color-gray-200);
    border-radius: 12px;
    padding: 12px 16px;
    transition: all 0.2s ease;
}
.input-primary:focus {
    border-color: var(--color-primary);
    outline: none;
    box-shadow: 0 0 0 3px var(--color-primary-bg);
}

/* ===== LINK STYLES ===== */
.link-primary {
    color: var(--color-primary);
    text-decoration: none;
    transition: all 0.2s ease;
}
.link-primary:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

/* ===== DIVIDER STYLES ===== */
.divider {
    height: 1px;
    background: var(--color-gray-200);
    margin: 16px 0;
}
.divider-primary {
    height: 2px;
    background: var(--gradient-primary);
    margin: 16px 0;
}

/* ===== ALERT STYLES ===== */
.alert-success {
    background: var(--color-success-bg);
    border-left: 4px solid var(--color-success);
    padding: 16px;
    border-radius: 12px;
    color: var(--color-success-dark);
}
.alert-error {
    background: var(--color-error-bg);
    border-left: 4px solid var(--color-error);
    padding: 16px;
    border-radius: 12px;
    color: var(--color-error-dark);
}
.alert-warning {
    background: var(--color-warning-bg);
    border-left: 4px solid var(--color-warning);
    padding: 16px;
    border-radius: 12px;
    color: var(--color-warning-dark);
}
.alert-info {
    background: var(--color-info-bg);
    border-left: 4px solid var(--color-info);
    padding: 16px;
    border-radius: 12px;
    color: var(--color-info-dark);
}

/* ===== LOADING STATES ===== */
.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--color-gray-200);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ===== RESPONSIVE UTILITIES ===== */
@media (max-width: 768px) {
    .card { padding: 16px; }
    .badge-primary, .badge-success, .badge-error, .badge-warning, .badge-info {
        padding: 3px 10px;
        font-size: 0.7rem;
    }
}