/* ═══════════════════════════════════════════════════════════════════════════
   NEON THEME
   Immersive, futuristic dark theme with neon accents
   Used across: queue, live session, reviewer dashboard, artist dashboard, submit

   NOTE: This file consolidates neon theme tokens that were previously
   duplicated across 10+ templates. Import after design-system.css.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* ─────────────────────────────────────────────────────────────────────
       Core Blacks & Surfaces
       Layered surface system for depth and hierarchy
       ───────────────────────────────────────────────────────────────────── */
    --neon-black: #0a0a0a;
    --neon-black-rich: #020204;
    --neon-surface-1: rgba(8, 8, 12, 0.95);
    --neon-surface-2: rgba(14, 14, 20, 0.9);
    --neon-surface-3: rgba(22, 22, 30, 0.85);

    /* Solid surface variants (for elements needing opaque backgrounds) */
    --neon-surface-1-solid: #0a0a0c;
    --neon-surface-2-solid: #111114;
    --neon-surface-3-solid: #18181c;

    /* ─────────────────────────────────────────────────────────────────────
       Neon Accent Colors
       Hierarchy: ember (primary action) → cyan (informational) → rest (muted)
       ───────────────────────────────────────────────────────────────────── */
    --neon-teal: #00b894;         /* Desaturated — supporting role */
    --neon-cyan: #00d4ff;         /* Secondary accent — informational */
    --neon-violet: #9b7fd4;       /* Desaturated — tertiary accent */
    --neon-magenta: #d45fb7;      /* Desaturated — used sparingly */
    --neon-magenta-alt: #cc4499;  /* Desaturated alt */

    /* ─────────────────────────────────────────────────────────────────────
       Warm Accents
       Ember and amber for live/active states
       ───────────────────────────────────────────────────────────────────── */
    --neon-ember: #ff6b35;
    --neon-amber: #ffb800;
    --neon-live-red: #ff4d00;
    --neon-success: #00ff88;

    /* ─────────────────────────────────────────────────────────────────────
       Neutral Silvers
       Text and secondary element colors
       ───────────────────────────────────────────────────────────────────── */
    --neon-silver: #e8e8e8;
    --neon-silver-alt: #b8c5d6;
    --neon-silver-dim: #a0a0a0;
    --neon-silver-dim-alt: #6b7a8f;
    --neon-silver-faint: #737373;
    --neon-silver-faint-alt: #3d4654;

    /* ─────────────────────────────────────────────────────────────────────
       Gradient Tokens
       Use for highlights, buttons, active states
       ───────────────────────────────────────────────────────────────────── */
    --neon-grad-primary: linear-gradient(135deg, var(--neon-cyan), var(--neon-teal));
    --neon-grad-accent: linear-gradient(135deg, var(--neon-violet), var(--neon-magenta));
    --neon-grad-warm: linear-gradient(135deg, var(--neon-ember), var(--neon-amber));
    --neon-grad-live: linear-gradient(135deg, var(--neon-live-red), var(--neon-amber));
    --neon-grad-violet: linear-gradient(135deg, var(--neon-violet), var(--neon-magenta));
    --neon-grad-surface: linear-gradient(180deg, var(--neon-surface-2-solid), var(--neon-surface-1-solid));

    /* ─────────────────────────────────────────────────────────────────────
       Glow Tokens (hover-only use for performance)
       Apply on :hover, :focus, or active states only
       ───────────────────────────────────────────────────────────────────── */
    --neon-glow-cyan: 0 0 20px rgba(0, 212, 255, 0.2);
    --neon-glow-teal: 0 0 20px rgba(0, 184, 148, 0.2);
    --neon-glow-violet: 0 0 20px rgba(155, 127, 212, 0.2);
    --neon-glow-ember: 0 0 20px rgba(255, 107, 53, 0.3);
    --neon-glow-live: 0 0 30px rgba(255, 77, 0, 0.4);

    /* ─────────────────────────────────────────────────────────────────────
       Border Tokens
       Subtle borders for layered UI
       ───────────────────────────────────────────────────────────────────── */
    --neon-border-subtle: rgba(255, 255, 255, 0.06);
    --neon-border-dim: rgba(255, 255, 255, 0.1);
    --neon-border-accent: rgba(0, 212, 255, 0.15);
    --neon-border-accent-strong: rgba(0, 212, 255, 0.25);
}

/* ═══════════════════════════════════════════════════════════════════════════
   LEGACY ALIASES
   Map old variable names to new neon- prefixed tokens for backwards compatibility
   These can be used during gradual migration
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* Surface aliases (used in templates) */
    --black-rich: var(--neon-black-rich);
    --surface-1: var(--neon-surface-1);
    --surface-2: var(--neon-surface-2);
    --surface-3: var(--neon-surface-3);

    /* Neon color aliases (unprefixed for convenience) */
    --teal: var(--neon-teal);
    --cyan: var(--neon-cyan);
    --violet: var(--neon-violet);
    --magenta: var(--neon-magenta);

    /* Warm accent aliases */
    --amber: var(--neon-amber);
    --live-red: var(--neon-live-red);
    --neon-ember-subtle: rgba(255, 77, 0, 0.15);
    --neon-ember-glow: rgba(255, 77, 0, 0.2);

    /* Silver aliases */
    --silver: var(--neon-silver);
    --silver-dim: var(--neon-silver-dim);
    --silver-faint: var(--neon-silver-faint);

    /* Gradient aliases */
    --grad-primary: var(--neon-grad-primary);
    --grad-accent: var(--neon-grad-accent);
    --grad-live: var(--neon-grad-live);
    --grad-warm: var(--neon-grad-warm);
    --grad-violet: var(--neon-grad-violet);
    --grad-surface: var(--neon-grad-surface);

    /* Glow aliases */
    --glow-teal: var(--neon-glow-teal);
    --glow-cyan: var(--neon-glow-cyan);
    --glow-violet: var(--neon-glow-violet);
    --glow-ember: var(--neon-glow-ember);
    --glow-live: var(--neon-glow-live);

    /* Border aliases */
    --border-accent: var(--neon-border-accent);
    --border-dim: var(--neon-border-dim);

    /* Surface aliases */
    --surface-elevated: var(--neon-surface-2-solid, #151515);
    --surface-hover: rgba(255, 255, 255, 0.06);
}

/* ═══════════════════════════════════════════════════════════════════════════
   AMBIENT BACKGROUNDS
   Reusable ambient glow patterns for page backgrounds
   ═══════════════════════════════════════════════════════════════════════════ */

.neon-ambient {
    position: relative;
}

.neon-ambient::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse 80% 50% at 20% 10%, rgba(0, 212, 255, 0.03) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 85% 90%, rgba(155, 127, 212, 0.02) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

.neon-ambient-top::before {
    content: '';
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1400px;
    height: 400px;
    background: radial-gradient(ellipse at 50% 0%, rgba(0, 212, 255, 0.04) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.neon-ambient-corners::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background:
        radial-gradient(circle at 0% 0%, rgba(0, 212, 255, 0.04) 0%, transparent 30%),
        radial-gradient(circle at 100% 100%, rgba(155, 127, 212, 0.03) 0%, transparent 30%);
    pointer-events: none;
    z-index: 0;
}