/**
 * Khaas Tech N Games Theme Design Tokens & CSS Variables
 * Reverse engineered from Computer Lounge (NZ)
 */

:root {
  /* Color Palette */
  --heading-color: #2c2c2c;
  --heading-rgb: 44, 44, 44;
  --text-color: #535454;
  --text-rgb: 83, 84, 84;
  --bg-color: #ffffff;
  --surface-alt: #f7f7f7;
  
  /* Brand Accents */
  --accent-lime: #e0ff27;
  --accent-lime-rgb: 224, 255, 39;
  --btn-bg-dark: #2c2c2c;
  --btn-text-lime: #e0ff27;
  --btn-bg-hover: #505631;
  
  /* Status Colors */
  --in-stock: #b2d100;
  --in-stock-rgb: 178, 209, 0;
  --low-stock: #94ce24;
  --sale-badge: #e5635d;
  --sale-badge-rgb: 229, 99, 93;
  --star-rating: #ffc600;
  
  /* Borders & Dividers */
  --card-border: #eaeaea;
  --divider-color: #eaeaea;
  --pill-chip-bg: #e8e8e8;
  --input-border: rgba(83, 84, 84, 0.25);
  --input-focus-border: #2c2c2c;
  
  /* Typography System */
  --font-primary: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 900;
  
  /* Layout Dimensions */
  --page-width: 1538px;
  --header-height: 100px;
  --header-height-mobile: 64px;
  --announcement-height: 36px;
  --sidebar-width: 280px;
  
  /* Gaps and Spacing */
  --gutter-lg: 64px;
  --gutter-md: 32px;
  --gutter-sm: 16px;
  --section-gap: 64px;
  --section-gap-mobile: 36px;
  --grid-column-gap: 24px;
  --grid-row-gap: 24px;
  
  /* Radii */
  --btn-radius: 27px;
  --input-radius: 27px;
  --chip-radius: 20px;
  --card-radius: 8px;
  --badge-radius: 20px;
  --modal-radius: 6px;
  
  /* Shadows */
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12);
  --shadow-drawer: -4px 0 25px rgba(0, 0, 0, 0.15);
  
  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 768px) {
  :root {
    --header-height: 64px;
    --section-gap: 36px;
    --grid-column-gap: 12px;
    --grid-row-gap: 16px;
  }
}