/* ===== CSS Variables / Design Tokens ===== */
:root {
    /* Brand Colors */
    --color-primary: #f8c21b;
    --color-primary-hover: #e5b218;
    --color-primary-light: rgba(248, 194, 27, 0.1);

    /* Status */
    --color-live: #fa3434;
    --color-hot: #f53923;
    --color-blue: #218aff;
    --color-gold: #f5a623;
    --color-success: #43e97b;
    --color-warning: #ffb600;

    /* Neutral */
    --color-text: #333;
    --color-text-secondary: #777;
    --color-text-light: #999;
    --color-border: #e6e6e6;
    --color-border-light: #d8d8d8;
    --color-bg: #f0f1f6;
    --color-bg-card: #fff;
    --color-bg-dark: #000;

    /* Footer */
    --color-footer-bg: #25284c;
    --color-footer-link: #9698ff;
    --color-footer-text: #5b5dae;

    /* Layout */
    --header-height: 72px;
    --inner-width: 1200px;
    --inner-width-sm: 960px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-full: 50%;

    /* Shadows */
    --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.08);
    --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-header: 0 0 5px rgba(0, 0, 0, 0.1);
    --shadow-dropdown: 0 4px 16px rgba(0, 0, 0, 0.15);

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* Z-index */
    --z-dropdown: 100;
    --z-header: 1000;
    --z-modal-backdrop: 2000;
    --z-modal: 2001;
    --z-fix: 99;
}

/* ===== Animations ===== */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes breathe {
    0%, 100% { transform: scale(0.95); }
    50% { transform: scale(1); }
}