/**
 * GripSpaceGaming Design System - CSS Variables
 * Auto-generated from design-tokens.json
 * Theme: Obsidian Deep Space & Cyber Precision
 */

:root {
  /* Primitive Colors */
  --gsg-color-obsidian-950: #040608;
  --gsg-color-obsidian-900: #070a0e;
  --gsg-color-obsidian-800: #0f141c;
  --gsg-color-obsidian-700: #161f2c;
  --gsg-color-obsidian-600: #212d3e;
  --gsg-color-obsidian-500: #304055;

  --gsg-color-cyan-400: #00f2fe;
  --gsg-color-cyan-500: #00c3fe;
  --gsg-color-cyan-glow: rgba(0, 242, 254, 0.25);

  --gsg-color-emerald-400: #00ff87;
  --gsg-color-emerald-500: #00e076;
  --gsg-color-emerald-glow: rgba(0, 255, 135, 0.25);

  --gsg-color-titanium-100: #f0f6fc;
  --gsg-color-titanium-200: #c9d1d9;
  --gsg-color-titanium-300: #8b949e;
  --gsg-color-titanium-400: #484f58;

  --gsg-color-amber-400: #ffb800;
  --gsg-color-crimson-400: #ff453a;

  /* Semantic Color Mappings */
  --gsg-bg-page: var(--gsg-color-obsidian-900);
  --gsg-bg-surface: var(--gsg-color-obsidian-800);
  --gsg-bg-elevated: var(--gsg-color-obsidian-700);
  --gsg-bg-glass: rgba(15, 20, 28, 0.72);
  --gsg-bg-glass-nav: rgba(7, 10, 14, 0.82);

  --gsg-text-primary: var(--gsg-color-titanium-100);
  --gsg-text-secondary: var(--gsg-color-titanium-200);
  --gsg-text-muted: var(--gsg-color-titanium-300);

  --gsg-border-subtle: rgba(255, 255, 255, 0.08);
  --gsg-border-highlight: rgba(0, 242, 254, 0.35);
  --gsg-border-active: rgba(0, 255, 135, 0.45);

  --gsg-status-instock: var(--gsg-color-emerald-400);
  --gsg-status-warranty: var(--gsg-color-emerald-400);
  --gsg-status-accent: var(--gsg-color-cyan-400);
  --gsg-status-warning: var(--gsg-color-amber-400);
  --gsg-status-danger: var(--gsg-color-crimson-400);

  /* Typography */
  --gsg-font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Prompt', 'Sukhumvit Set', sans-serif;
  --gsg-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --gsg-text-xs: 0.75rem;
  --gsg-text-sm: 0.875rem;
  --gsg-text-base: 1rem;
  --gsg-text-lg: 1.125rem;
  --gsg-text-xl: 1.25rem;
  --gsg-text-2xl: 1.5rem;
  --gsg-text-3xl: 1.875rem;
  --gsg-text-4xl: 2.25rem;
  --gsg-text-5xl: 3rem;
  --gsg-text-6xl: 3.75rem;

  --gsg-weight-regular: 400;
  --gsg-weight-medium: 500;
  --gsg-weight-semibold: 600;
  --gsg-weight-bold: 700;
  --gsg-weight-black: 800;

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

  /* Border Radii */
  --gsg-radius-sm: 6px;
  --gsg-radius-md: 12px;
  --gsg-radius-lg: 18px;
  --gsg-radius-xl: 24px;
  --gsg-radius-full: 9999px;

  /* Shadows & Visual Effects */
  --gsg-shadow-card: 0 8px 32px 0 rgba(0, 0, 0, 0.45);
  --gsg-shadow-glow-cyan: 0 0 24px 0 rgba(0, 242, 254, 0.25);
  --gsg-shadow-glow-green: 0 0 24px 0 rgba(0, 255, 135, 0.25);
  --gsg-backdrop-blur: blur(20px) saturate(180%);

  /* Navigation & UI Component Defaults */
  --gsg-nav-height: 56px;
  --gsg-drawer-width: 380px;
  --gsg-transition-standard: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}