/* ==========================================================================
   PC BYTES - Design Tokens & CSS Custom Properties
   Dark cyber/gaming theme for PC BYTES Computer Shop
   Baguio City, Philippines
   ========================================================================== */

:root {
  /* -----------------------------------------------------------------------
     Brand Colors
     ----------------------------------------------------------------------- */
  --primary: #ff0044;                          /* Electric red - main accent */
  --primary-dark: #cc0033;
  --primary-glow: rgba(255, 0, 68, 0.15);
  --primary-glow-strong: rgba(255, 0, 68, 0.35);

  --accent: #ff5500;                           /* Orange-red - deals/urgency */
  --accent-dark: #cc4400;
  --accent-glow: rgba(255, 85, 0, 0.15);

  --success: #00e676;                          /* Neon green - prices/success */
  --success-dark: #00c853;
  --success-glow: rgba(0, 230, 118, 0.15);

  --warning: #ffc107;                          /* Gold - ratings/warnings */
  --warning-glow: rgba(255, 193, 7, 0.15);

  --info: #448aff;

  /* -----------------------------------------------------------------------
     Backgrounds - Deep Dark Cyber Theme
     ----------------------------------------------------------------------- */
  --bg-body: #06060b;
  --bg-dark: #0a0a12;
  --bg-surface: #0f0f18;
  --bg-card: #141422;
  --bg-elevated: #1a1a2e;
  --bg-hover: #1e1e35;

  /* -----------------------------------------------------------------------
     Borders
     ----------------------------------------------------------------------- */
  --border: rgba(255, 255, 255, 0.06);
  --border-light: rgba(255, 255, 255, 0.1);
  --border-primary: rgba(255, 0, 68, 0.3);
  --border-accent: rgba(255, 85, 0, 0.3);
  --border-success: rgba(0, 230, 118, 0.25);

  /* -----------------------------------------------------------------------
     Text Colors
     ----------------------------------------------------------------------- */
  --text: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.7);
  --text-muted: rgba(255, 255, 255, 0.45);
  --text-faint: rgba(255, 255, 255, 0.25);

  /* -----------------------------------------------------------------------
     Typography
     ----------------------------------------------------------------------- */
  --font-heading: 'Rajdhani', 'Orbitron', sans-serif;
  --font-body: 'Inter', 'Barlow', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* -----------------------------------------------------------------------
     Spacing Scale
     ----------------------------------------------------------------------- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  /* -----------------------------------------------------------------------
     Border Radius
     ----------------------------------------------------------------------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* -----------------------------------------------------------------------
     Box Shadows
     ----------------------------------------------------------------------- */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 16px 60px rgba(0, 0, 0, 0.6);
  --shadow-glow-primary: 0 0 20px rgba(255, 0, 68, 0.4);
  --shadow-glow-accent: 0 0 20px rgba(255, 85, 0, 0.4);
  --shadow-glow-success: 0 0 20px rgba(0, 230, 118, 0.3);

  /* -----------------------------------------------------------------------
     Transitions
     ----------------------------------------------------------------------- */
  --transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: all 0.15s ease;
  --transition-slow: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);

  /* -----------------------------------------------------------------------
     Layout Constants
     ----------------------------------------------------------------------- */
  --navbar-height: 72px;
  --container-max: 1400px;
  --sidebar-width: 260px;
}