/* ═══════════════════════════════════════════════════════════════
   VARIABLES.CSS — Design Tokens & Custom Properties
   KnexPay Unified Design System
   Color: PURE GREEN #00ff00 | Fonts: Orbitron + JetBrains Mono
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* ── Blacks & Neutrals ── */
    --black: #000;
    --pitch-black: #030303;
    --dark: #0a0a0a;
    --darker: #050505;
    --white: #fff;
    --gray: #888;
    --light-gray: #ccc;

    /* ── Neon Palette ── */
    --neon: #00ff00;
    --neon-bright: #00ff66;
    --neon-glow: #00cc00;
    --neon-dark: #00aa00;
    --neon-magenta: #ff00ff;
    --neon-yellow: #ffff00;
    --neon-cyan: #00ffff;
    --neon-red: #ff3333;
    --neon-orange: #ff8800;
    --neon-pink: #ff00aa;

    /* ── Semi-transparent Greens ── */
    --green-glow: rgba(0, 255, 0, 0.5);
    --green-subtle: rgba(0, 255, 0, 0.1);

    /* ── Box-Shadow Glows ── */
    --glow-neon: 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 40px #00ff00, 0 0 80px #00ff0088;
    --glow-neon-soft: 0 0 5px rgba(0,255,0,0.5), 0 0 15px rgba(0,255,0,0.3);
    --glow-neon-text: 0 0 10px #00ff00, 0 0 20px #00ff0088, 0 0 40px #00ff0044;
    --glow-neon-intense: 0 0 15px #00ff00, 0 0 30px #00ff0088, 0 0 60px #00ff0044, 0 0 120px #00ff0022;
    --glow-magenta: 0 0 10px #ff00ff, 0 0 20px #ff00ff88, 0 0 40px #ff00ff44;
    --glow-cyan: 0 0 10px #00ffff, 0 0 20px #00ffff88, 0 0 40px #00ffff44;

    /* ── Typography ── */
    --font-display: 'Orbitron', sans-serif;
    --font-body: 'JetBrains Mono', monospace;
    --font-mono: 'JetBrains Mono', monospace;

    /* ── Easing ── */
    --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}