/* ==========================================================================
   Instant Gamers - Design System Tokens
   ========================================================================== */

:root {
  /* Brand Primary Colors */
  --color-primary: #0c71f4;
  --color-primary-hover: #0a5ecb;
  --color-primary-glow: rgba(12, 113, 244, 0.35);
  --color-accent-cyan: #2e8cff;
  --color-accent-light: #5caaff;

  /* Dark Gaming Tones (Navy) */
  --color-navy-900: #06152d;
  --color-navy-800: #092851;
  --color-navy-700: #0c397c;
  --color-navy-600: #10203b;
  --color-navy-500: #17365e;

  /* Neutral Light Surfaces */
  --color-surface-bg: #f8fbff;
  --color-surface-card: #ffffff;
  --color-surface-muted: #eef5fc;
  --color-border: #dce5ef;
  --color-border-subtle: #edf1f6;

  /* Typography Colors */
  --color-text-main: #0d1b2f;
  --color-text-muted: #62758d;
  --color-text-light: #e2ebf8;
  --color-text-white: #ffffff;

  /* Functional Status Colors */
  --color-status-online: #13b86b;
  --color-status-glow: rgba(19, 184, 107, 0.4);

  /* Typography Scale */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  
  /* Shadows & Elevation */
  --shadow-sm: 0 2px 6px rgba(16, 32, 59, 0.05);
  --shadow-md: 0 8px 20px rgba(16, 32, 59, 0.08);
  --shadow-lg: 0 16px 36px rgba(16, 32, 59, 0.12);
  --shadow-primary: 0 8px 24px rgba(12, 113, 244, 0.28);

  /* Border Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 9999px;

  /* Transitions */
  --transition-fast: 0.18s ease;
  --transition-normal: 0.28s ease;
}