/* ==========================================================
   BellexFire Digital — Brand Tokens
   assets/css/brand.css
   ========================================================== */

:root {
  /* Base backgrounds */
  --bxf-bg-deep:      #0a0418;
  --bxf-bg-panel:     #15092b;
  --bxf-bg-panel-2:   #1d0f3a;
  --bxf-bg-card:      rgba(29, 15, 58, 0.7);

  /* Brand colors */
  --bxf-magenta:      #ff2bd6;
  --bxf-hot-pink:     #ff4d8f;
  --bxf-violet:       #a855f7;
  --bxf-deep-purple:  #6d28d9;
  --bxf-cyan:         #22d3ee;
  --bxf-electric:     #e879f9;

  /* Text */
  --bxf-text:         #f5f0ff;
  --bxf-text-dim:     #c4b5fd;
  --bxf-text-muted:   #8b7aa8;

  /* Borders + glows */
  --bxf-border:       rgba(168, 85, 247, 0.3);
  --bxf-border-hot:   rgba(255, 43, 214, 0.5);
  --bxf-glow-pink:    0 0 20px rgba(255, 43, 214, 0.5);
  --bxf-glow-violet:  0 0 20px rgba(168, 85, 247, 0.4);

  /* Gradients */
  --bxf-gradient-primary: linear-gradient(135deg, #ff2bd6 0%, #a855f7 100%);
  --bxf-gradient-hero:    linear-gradient(180deg, #0a0418 0%, #1d0f3a 100%);

  /* Type */
  --bxf-font-display: 'Orbitron', 'Rajdhani', system-ui, sans-serif;
  --bxf-font-body:    'Inter', system-ui, -apple-system, sans-serif;

  /* Spacing */
  --bxf-space-1:  0.25rem;
  --bxf-space-2:  0.5rem;
  --bxf-space-3:  0.75rem;
  --bxf-space-4:  1rem;
  --bxf-space-6:  1.5rem;
  --bxf-space-8:  2rem;
  --bxf-space-12: 3rem;
  --bxf-space-16: 4rem;
  --bxf-space-24: 6rem;

  /* Radii */
  --bxf-radius-sm: 0.375rem;
  --bxf-radius:    0.75rem;
  --bxf-radius-lg: 1rem;

  /* Container */
  --bxf-container: 1200px;
}