/* ═══════════════════════════════════════════════════════════════
   BladeZ Design System — CSS Custom Properties
   Dark blade-themed professional e-commerce design
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Core Colors ────────────────────────────────────────────── */
  --color-bg-primary:    #0a0a0a;
  --color-bg-secondary:  #111111;
  --color-bg-tertiary:   #1a1a1a;
  --color-bg-card:       #141414;
  --color-bg-elevated:   #1e1e1e;
  --color-bg-input:      #1a1a1a;
  --color-bg-hover:      #222222;

  /* ── Accent Colors ─────────────────────────────────────────── */
  --color-accent:        #dc2626;
  --color-accent-hover:  #ef4444;
  --color-accent-dark:   #991b1b;
  --color-gold:          #d4a853;
  --color-gold-hover:    #e4b863;
  --color-gold-dark:     #b8922f;

  /* ── Text Colors ───────────────────────────────────────────── */
  --color-text-primary:  #f5f5f5;
  --color-text-secondary:#a3a3a3;
  --color-text-muted:    #666666;
  --color-text-inverse:  #0a0a0a;

  /* ── Status Colors ─────────────────────────────────────────── */
  --color-success:       #22c55e;
  --color-success-bg:    rgba(34, 197, 94, 0.1);
  --color-warning:       #f59e0b;
  --color-warning-bg:    rgba(245, 158, 11, 0.1);
  --color-error:         #ef4444;
  --color-error-bg:      rgba(239, 68, 68, 0.1);
  --color-info:          #3b82f6;
  --color-info-bg:       rgba(59, 130, 246, 0.1);

  /* ── Borders ───────────────────────────────────────────────── */
  --color-border:        #2a2a2a;
  --color-border-light:  #333333;
  --color-border-focus:  #dc2626;

  /* ── Typography ────────────────────────────────────────────── */
  --font-primary:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:           'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

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

  --leading-tight:  1.25;
  --leading-normal: 1.5;
  --leading-relaxed:1.75;

  /* ── 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;
  --space-24: 6rem;

  /* ── Borders & Radius ──────────────────────────────────────── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-full:9999px;

  /* ── Shadows ───────────────────────────────────────────────── */
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.3);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg:   0 8px 24px rgba(0,0,0,0.5);
  --shadow-xl:   0 16px 48px rgba(0,0,0,0.6);
  --shadow-glow: 0 0 20px rgba(220,38,38,0.15);

  /* ── Transitions ───────────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;

  /* ── Layout ────────────────────────────────────────────────── */
  --header-height:     72px;
  --sidebar-width:     260px;
  --container-max:     1280px;
  --container-narrow:  960px;

  /* ── Z-Index Scale ─────────────────────────────────────────── */
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-overlay:   300;
  --z-modal:     400;
  --z-toast:     500;
}