/* =====================================================
   InfoShop — CSS Variables (Design Tokens)
   ===================================================== */

:root {
  /* Colors - Dark Theme */
  --color-bg-base:        #080c18;
  --color-bg-surface:     #0d1226;
  --color-bg-elevated:    #131930;
  --color-bg-card:        #161c35;
  --color-bg-hover:       #1c2340;

  /* Borders */
  --color-border:         rgba(99, 120, 255, 0.12);
  --color-border-bright:  rgba(99, 120, 255, 0.30);

  /* Primary - Electric Blue */
  --color-primary:        #4f7eff;
  --color-primary-light:  #7a9fff;
  --color-primary-dark:   #2d5ce6;
  --color-primary-glow:   rgba(79, 126, 255, 0.25);
  --color-primary-subtle: rgba(79, 126, 255, 0.10);

  /* Accent - Gold */
  --color-accent:         #f5a623;
  --color-accent-light:   #fbbf24;
  --color-accent-dark:    #d97706;
  --color-accent-glow:    rgba(245, 166, 35, 0.20);

  /* Success / Warning / Danger */
  --color-success:        #10b981;
  --color-success-subtle: rgba(16, 185, 129, 0.12);
  --color-warning:        #f59e0b;
  --color-warning-subtle: rgba(245, 158, 11, 0.12);
  --color-danger:         #ef4444;
  --color-danger-subtle:  rgba(239, 68, 68, 0.12);

  /* Text */
  --color-text-primary:   #e8ecf8;
  --color-text-secondary: #8b96b8;
  --color-text-muted:     #5a6688;
  --color-text-inverse:   #080c18;

  /* Crypto brand colors */
  --color-btc:  #f7931a;
  --color-ltc:  #bfbbbb;
  --color-bnb:  #f3ba2f;
  --color-usdt: #26a17b;

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

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

  /* Typography */
  --font-sans:  'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-mono:  'JetBrains Mono', 'Fira Code', monospace;
  --font-size-xs:   0.75rem;
  --font-size-sm:   0.875rem;
  --font-size-base: 1rem;
  --font-size-lg:   1.125rem;
  --font-size-xl:   1.25rem;
  --font-size-2xl:  1.5rem;
  --font-size-3xl:  1.875rem;
  --font-size-4xl:  2.25rem;
  --font-size-5xl:  3rem;

  /* Shadows */
  --shadow-sm:     0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:     0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg:     0 8px 32px rgba(0,0,0,0.5);
  --shadow-glow:   0 0 24px var(--color-primary-glow);
  --shadow-card:   0 4px 24px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04);

  /* Transitions */
  --transition-fast:   0.15s ease;
  --transition-base:   0.25s ease;
  --transition-slow:   0.4s ease;

  /* Z-index layers */
  --z-dropdown: 100;
  --z-modal:    200;
  --z-toast:    300;
  --z-nav:      50;
}