/* KnexPay CSS Variables — Futuristic Neon Transparent Glass */
:root {
    /* Background artwork */
    --bg-url: none;
    --fx-x: 50%;
    --fx-y: 45%;

    /* Glass — completely transparent with neon orange tint */
    --glass-a: 0.03;
    --glass-b: 0.06;
    --glass-c: 0.02;

    --glass: rgba(255,140,0, var(--glass-a));
    --glass-strong: rgba(255,140,0, var(--glass-b));
    --glass-soft: rgba(255,140,0, var(--glass-c));
    --glass-input: rgba(255,140,0, 0.04);

    /* Neon Yellow fine outlines */
    --stroke: rgba(255,215,0, 0.50);
    --stroke-light: rgba(255,215,0, 0.28);
    --stroke-subtle: rgba(255,215,0, 0.14);

    /* Blur */
    --blur-soft: 14px;
    --blur-med: 22px;
    --blur-strong: 36px;

    /* Neon shadows */
    --shadow-sm: 0 2px 12px rgba(255,140,0,0.06), 0 0 1px rgba(255,215,0,0.25);
    --shadow-md: 0 8px 32px rgba(255,140,0,0.08), 0 0 1px rgba(255,215,0,0.35);
    --shadow-lg: 0 16px 48px rgba(255,140,0,0.10), 0 0 2px rgba(255,215,0,0.45);
    --shadow-neon: 0 0 20px rgba(255,140,0,0.25), 0 0 50px rgba(255,140,0,0.08);

    /* Text */
    --text: rgba(255,255,255,0.96);
    --text-secondary: rgba(255,255,255,0.65);
    --text-muted: rgba(255,255,255,0.38);
    --text-dim: rgba(255,255,255,0.22);

    /* Neon Palette */
    --neon: #FF8C00;
    --knex-orange: #FF8C00;
    --knex-gold: #FFD700;
    --cyan: #FFD700;
    --magenta: #ff00ff;
    --yellow: #FFD700;
    --red: #ff3333;
    --orange: #FF8C00;
    --green: #34C759;

    /* Neon Glows */
    --knex-glow: 0 0 14px #FF8C00, 0 0 40px #FF8C0055, 0 0 80px #FF8C0022;
    --glow-neon: 0 0 12px rgba(255,140,0,0.55), 0 0 36px rgba(255,140,0,0.2);
    --glow-cyan: 0 0 12px rgba(255,215,0,0.55), 0 0 36px rgba(255,215,0,0.2);
    --glow-magenta: 0 0 12px rgba(255,0,255,0.55), 0 0 36px rgba(255,0,255,0.2);
    --glow-red: 0 0 12px rgba(255,51,51,0.55), 0 0 36px rgba(255,51,51,0.2);
    --glow-yellow: 0 0 12px rgba(255,215,0,0.55), 0 0 36px rgba(255,215,0,0.2);

    /* Borders */
    --border: var(--stroke-light);
    --border-cyan: rgba(255,215,0, 0.3);
    --border-magenta: rgba(255,0,255, 0.35);

    /* Background */
    --bg: #050505;
    --bg-secondary: rgba(0,0,0,0.5);
    --bg-card: var(--glass);
    --bg-input: var(--glass-input);

    /* iOS system font */
    --font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text',
            system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-mono: 'SF Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 14px;
    --spacing-lg: 20px;
    --spacing-xl: 28px;

    /* Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 50%;
    --radius-pill: 999px;

    /* Transitions */
    --transition-fast: 0.18s ease;
    --transition-smooth: 0.32s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-slow: 0.5s ease;
    --transition-spring: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);

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

    /* Safe areas */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);

    /* Computed layout heights (safe-area aware) */
    --header-content-height: 32px;
    --header-height: calc(var(--header-content-height) + var(--safe-top));
    --tab-bar-content-height: 46px;
    --tab-bar-height: calc(var(--tab-bar-content-height) + var(--safe-bottom));
}