/* ============================================================
   Native Pyro — CSS Variables
   Theme: Pyro (Dark Industrial + Explosive Warmth)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow+Condensed:wght@300;400;600;700;900&family=Barlow:wght@300;400;500;600&display=swap');

:root {
  /* ---- Brand Colors ---- */
  --color-fire:        #FF4500;
  --color-ember:       #FF6B35;
  --color-gold:        #FFB800;
  --color-gold-light:  #FFD44D;
  --color-smoke:       #8B8B8B;

  /* ---- Dark Theme ---- */
  --bg-body:           #0D0D0D;
  --bg-surface:        #141414;
  --bg-card:           #1A1A1A;
  --bg-card-hover:     #222222;
  --bg-elevated:       #252525;
  --bg-nav:            #000000;
  --bg-footer:         #080808;
  --bg-input:          #1E1E1E;

  /* ---- Text ---- */
  --text-primary:      #F0EDE8;
  --text-secondary:    #A8A49E;
  --text-muted:        #666660;
  --text-accent:       #FF4500;
  --text-gold:         #FFB800;

  /* ---- Borders ---- */
  --border-color:      #2A2A2A;
  --border-accent:     #FF4500;
  --border-gold:       #FFB800;

  /* ---- Layout ---- */
  --nav-height:        72px;
  --sidebar-width:     260px;
  --content-padding:   2rem;
  --border-radius:     4px;
  --border-radius-lg:  8px;

  /* ---- Typography ---- */
  --font-display:      'Bebas Neue', 'Impact', sans-serif;
  --font-heading:      'Barlow Condensed', sans-serif;
  --font-body:         'Barlow', system-ui, sans-serif;
  --font-mono:         'JetBrains Mono', monospace;

  /* ---- Gradients ---- */
  --grad-fire:         linear-gradient(135deg, #FF4500, #FF6B35, #FFB800);
  --grad-dark:         linear-gradient(180deg, #1A1A1A 0%, #0D0D0D 100%);
  --grad-card:         linear-gradient(145deg, #1E1E1E, #141414);

  /* ---- Shadows ---- */
  --shadow-sm:         0 2px 8px rgba(0,0,0,0.5);
  --shadow-md:         0 4px 20px rgba(0,0,0,0.6);
  --shadow-lg:         0 8px 40px rgba(0,0,0,0.7);
  --shadow-fire:       0 0 30px rgba(255,69,0,0.3);
  --shadow-gold:       0 0 20px rgba(255,184,0,0.25);
}