/* KnexPay CSS Variables - Blueprint Inspired */
:root {
    /* Background Colors */
    --bg: #000;
    --bg-secondary: #0a0a0a;
    --bg-card: #111;
    --bg-input: #0d1117;

    /* Neon Accent Colors */
    --neon: #FF8C00;
    --cyan: #FFD700;
    --magenta: #ff00ff;
    --yellow: #FFD700;
    --red: #ff3333;
    --orange: #FF8C00;

    /* KnexCoin Brand */
    --knex-orange: #FF8C00;
    --knex-gold: #FFD700;
    --knex-glow: 0 0 10px #FF8C00, 0 0 20px #FF8C0066;

    /* Text Colors */
    --text: #f0f0f0;
    --text-dim: #888;
    --text-muted: #666;

    /* Borders */
    --border: rgba(255, 215, 0, 0.2);
    --border-cyan: rgba(255, 215, 0, 0.3);
    --border-magenta: rgba(255, 0, 255, 0.3);

    /* Glows */
    --glow-neon: 0 0 10px #FF8C00, 0 0 20px #FF8C0066;
    --glow-cyan: 0 0 10px #FFD700, 0 0 20px #FFD70066;
    --glow-magenta: 0 0 10px #ff00ff, 0 0 20px #ff00ff66;
    --glow-red: 0 0 10px #ff3333, 0 0 20px #ff333366;
    --glow-yellow: 0 0 10px #FFD700, 0 0 20px #FFD70066;

    /* Typography */
    --font: 'JetBrains Mono', 'Courier New', monospace;

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 50%;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-smooth: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* Z-Index Scale */
    --z-base: 1;
    --z-dropdown: 100;
    --z-modal: 1000;
    --z-overlay: 9000;
    --z-toast: 10000;
}