/* =================================================================
   🎨 BASE VARIABLES — CSS Custom Properties & Design Tokens
   Tách từ style.css để chuẩn hóa cấu trúc
   ================================================================= */

/* ============================================
   LEGACY VARIABLES (giữ tương thích ngược)
   ============================================ */
:root {
    /* Legacy color tokens */
    --bg-color: #0a0a0a;
    --second-bg-color: #151515;
    --main-color: #ff1a1a;
    --text-color: #ffffff;
    --hover-color: #cc0000;
    --accent-color: #ff4d4d;

    /* Spacing scale */
    --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-none: 0;
    --radius-sm:   2px;
    --radius-md:   4px;

    /* Transition presets */
    --transition-fast:   all 0.15s ease;
    --transition-base:   all 0.3s ease;
    --transition-slow:   all 0.5s ease;
    --transition-spring: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition-smooth: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);

    /* Z-index scale */
    --z-base:    1;
    --z-above:   10;
    --z-overlay: 100;
    --z-modal:   1000;
    --z-nav:     5000;
    --z-loader:  99999;
    --z-cursor:  999999;

    /* Glow presets */
    --glow-primary-sm:  0 0 8px rgba(239, 68, 68, 0.5);
    --glow-primary-md:  0 0 15px rgba(239, 68, 68, 0.6), 0 0 30px rgba(239, 68, 68, 0.3);
    --glow-primary-lg:  0 0 20px rgba(239, 68, 68, 0.8), 0 0 40px rgba(239, 68, 68, 0.5), 0 0 60px rgba(239, 68, 68, 0.3);

    /* Border presets */
    --border-subtle:  1px solid rgba(239, 68, 68, 0.15);
    --border-default: 1px solid rgba(72, 35, 35, 1);
    --border-active:  1px solid rgba(239, 68, 68, 0.5);
    --border-bright:  2px solid rgba(239, 68, 68, 0.8);
}