/* =====================================================
   CYBERPUNK COMMAND CENTER
   VARIABLES
===================================================== */

:root {

    /*==================================================
      COLORS
    ==================================================*/

    --bg-color: #04070d;
    --bg-secondary: #08121f;
    --panel-bg: rgba(10, 18, 35, 0.55);

    --text-color: #edf8ff;
    --text-muted: #8ba6b8;

    --cyan: #00f7ff;
    --blue: #3aa0ff;
    --purple: #9d4dff;
    --pink: #ff3cac;
    --green: #4cff8f;
    --warning: #ffbf47;
    --danger: #ff4b6e;

    --border-color: rgba(0, 247, 255, 0.20);

    /*==================================================
      GLOW COLORS
    ==================================================*/

    --glow-cyan: 0 0 10px rgba(0,247,255,.8),
                 0 0 20px rgba(0,247,255,.45);

    --glow-purple: 0 0 10px rgba(157,77,255,.8),
                   0 0 20px rgba(157,77,255,.45);

    --glow-pink: 0 0 10px rgba(255,60,172,.8),
                 0 0 20px rgba(255,60,172,.45);

    --shadow-panel: 0 0 30px rgba(0,247,255,.12);

    /*==================================================
      FONTS
    ==================================================*/

    --font-title: "Orbitron", sans-serif;
    --font-body: "JetBrains Mono", monospace;

    /*==================================================
      FONT SIZES
    ==================================================*/

    --fs-hero: clamp(3rem, 7vw, 5.8rem);

    --fs-h1: 2.4rem;
    --fs-h2: 1.8rem;
    --fs-h3: 1.3rem;

    --fs-body: 1rem;
    --fs-small: .9rem;

    /*==================================================
      SPACING
    ==================================================*/

    --space-xs: .4rem;
    --space-sm: .8rem;
    --space-md: 1.5rem;
    --space-lg: 3rem;
    --space-xl: 6rem;

    /*==================================================
      BORDER RADIUS
    ==================================================*/

    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;

    /*==================================================
      TRANSITIONS
    ==================================================*/

    --transition-fast: .2s ease;
    --transition: .35s ease;
    --transition-slow: .7s ease;

    /*==================================================
      PANEL
    ==================================================*/

    --panel-border: 1px solid rgba(0,247,255,.18);

    --glass-blur: blur(18px);

    /*==================================================
      GRID
    ==================================================*/

    --grid-size: 60px;

    /*==================================================
      HEADER
    ==================================================*/

    --header-height: 80px;

    /*==================================================
      STATUS BAR
    ==================================================*/

    --status-bar-height: 26px;

    /*==================================================
      Z-INDEX
    ==================================================*/

    --z-background: -5;
    --z-grid: -4;
    --z-particles: -3;
    --z-overlay: 5;
    --z-header: 100;
    --z-cursor: 9999;

}