/* ================================================================
   ThanhLong Theme - CSS Custom Properties Override
   Tham khảo giao diện cuulongtriky.com
   ================================================================ */

:root {
    /* === Background Colors === */
    --color-bg-primary: #0d0d14;
    --color-bg-secondary: #12121b;
    --color-bg-tertiary: #1a1a28;
    --color-bg-card: #151520;
    --color-bg-card-hover: #1e1e30;
    --color-bg-surface: #0f0f18;
    --color-bg-overlay: rgba(13, 13, 20, 0.9);
    --color-bg-navbar: rgba(13, 13, 20, 0.95);

    /* === Gold Accent (bright, like cuulongtriky) === */
    --color-gold-primary: #f1c40f;
    --color-gold-bright: #f9d923;
    --color-gold-light: #fce588;
    --color-gold-dark: #c9a20c;
    --color-gold-muted: #8a7a10;
    --color-text-gold: #f1c40f;
    --color-text-link: #f1c40f;
    --color-text-link-hover: #f9d923;

    /* === Cyan Accent === */
    --color-cyan: #00eaff;
    --color-cyan-dim: rgba(0, 234, 255, 0.3);
    --color-cyan-dark: #009db3;

    /* === Text Colors === */
    --color-text-primary: #e8e6e3;
    --color-text-secondary: #9a9a9a;
    --color-text-muted: #666666;
    --color-text-heading: #f1c40f;

    /* === Status Colors === */
    --color-status-online: #2ecc71;
    --color-status-offline: #e74c3c;
    --color-red: #ff4757;
    --color-green: #2ecc71;

    /* === Rate Colors === */
    --color-rate-high: #2ecc71;
    --color-rate-medium: #f39c12;
    --color-rate-low: #e74c3c;

    /* === Borders === */
    --border-gold: 1px solid rgba(241, 196, 15, 0.3);
    --border-gold-bright: 1px solid var(--color-gold-primary);
    --border-subtle: 1px solid rgba(255, 255, 255, 0.06);

    /* === Shadows === */
    --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-glow-gold: 0 0 20px rgba(241, 196, 15, 0.2);
    --shadow-glow-gold-strong: 0 0 30px rgba(241, 196, 15, 0.4);
    --shadow-glow-cyan: 0 0 15px rgba(0, 234, 255, 0.2);

    /* === Typography === */
    --font-body: 'Noto Sans', sans-serif;
    --font-heading: 'Noto Sans', sans-serif;

    /* === Spacing === */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;

    /* === Border Radius === */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    /* === Transitions === */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
}