/*
 * NumbahWan Design Tokens v1.0 - LIGHTWEIGHT
 * Pure CSS custom properties, no JS dependencies
 * Safe to include on any page without performance impact
 */

:root {
  /* ============================================
     COLOR TOKENS - Ember/Gold/Mystic Palette
     ============================================ */
  
  /* Primary: Ember Orange */
  --nw-ember-50: #fff7ed;
  --nw-ember-100: #ffedd5;
  --nw-ember-200: #fed7aa;
  --nw-ember-300: #fdba74;
  --nw-ember-400: #fb923c;
  --nw-ember-500: #ff6b00;
  --nw-ember-600: #ea580c;
  --nw-ember-700: #c2410c;
  --nw-ember-800: #9a3412;
  --nw-ember-900: #7c2d12;
  
  /* Secondary: Gold */
  --nw-gold-50: #fefce8;
  --nw-gold-100: #fef9c3;
  --nw-gold-200: #fef08a;
  --nw-gold-300: #fde047;
  --nw-gold-400: #facc15;
  --nw-gold-500: #ffd700;
  --nw-gold-600: #ca8a04;
  --nw-gold-700: #a16207;
  --nw-gold-800: #854d0e;
  --nw-gold-900: #713f12;
  
  /* Accent: Mystic Purple */
  --nw-mystic-50: #faf5ff;
  --nw-mystic-100: #f3e8ff;
  --nw-mystic-200: #e9d5ff;
  --nw-mystic-300: #d8b4fe;
  --nw-mystic-400: #c084fc;
  --nw-mystic-500: #a855f7;
  --nw-mystic-600: #9333ea;
  --nw-mystic-700: #7c3aed;
  --nw-mystic-800: #6b21a8;
  --nw-mystic-900: #581c87;
  
  /* Neutrals: Dark Theme */
  --nw-dark-50: #f8fafc;
  --nw-dark-100: #f1f5f9;
  --nw-dark-200: #e2e8f0;
  --nw-dark-300: #cbd5e1;
  --nw-dark-400: #94a3b8;
  --nw-dark-500: #64748b;
  --nw-dark-600: #475569;
  --nw-dark-700: #334155;
  --nw-dark-800: #1e293b;
  --nw-dark-850: #151c2c;
  --nw-dark-900: #0f172a;
  --nw-dark-950: #0a0a0f;
  
  /* Semantic Colors */
  --nw-success: #22c55e;
  --nw-warning: #f59e0b;
  --nw-error: #ef4444;
  --nw-info: #3b82f6;
  
  /* Rarity Colors */
  --nw-common: #9ca3af;
  --nw-uncommon: #22c55e;
  --nw-rare: #3b82f6;
  --nw-epic: #a855f7;
  --nw-legendary: #ffd700;
  --nw-mythic: #ff6b00;
  
  /* ============================================
     TYPOGRAPHY TOKENS
     ============================================ */
  
  /* Font Families - System fonts only (zero external dependencies) */
  --nw-font-display: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --nw-font-body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --nw-font-serif: Georgia, 'Times New Roman', serif;
  --nw-font-mono: ui-monospace, 'Cascadia Code', 'Courier New', monospace;
  
  /* Font Sizes - Fluid Typography (increased for readability) */
  --nw-text-xs: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --nw-text-sm: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  --nw-text-base: clamp(1.125rem, 1rem + 0.6vw, 1.25rem);
  --nw-text-lg: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  --nw-text-xl: clamp(1.5rem, 1.25rem + 1vw, 1.75rem);
  --nw-text-2xl: clamp(1.75rem, 1.5rem + 1.25vw, 2.25rem);
  --nw-text-3xl: clamp(2rem, 1.75rem + 1.5vw, 2.75rem);
  --nw-text-4xl: clamp(2.5rem, 2rem + 2.5vw, 3.5rem);
  --nw-text-5xl: clamp(3.5rem, 2.5rem + 5vw, 5rem);
  
  /* Font Weights */
  --nw-font-normal: 400;
  --nw-font-medium: 500;
  --nw-font-semibold: 600;
  --nw-font-bold: 700;
  --nw-font-black: 900;
  
  /* Line Heights */
  --nw-leading-tight: 1.25;
  --nw-leading-normal: 1.5;
  --nw-leading-relaxed: 1.75;
  
  /* ============================================
     SPACING TOKENS
     ============================================ */
  --nw-space-1: 0.25rem;
  --nw-space-2: 0.5rem;
  --nw-space-3: 0.75rem;
  --nw-space-4: 1rem;
  --nw-space-5: 1.25rem;
  --nw-space-6: 1.5rem;
  --nw-space-8: 2rem;
  --nw-space-10: 2.5rem;
  --nw-space-12: 3rem;
  --nw-space-16: 4rem;
  
  /* ============================================
     BORDER & RADIUS TOKENS
     ============================================ */
  --nw-radius-sm: 0.25rem;
  --nw-radius-md: 0.5rem;
  --nw-radius-lg: 0.75rem;
  --nw-radius-xl: 1rem;
  --nw-radius-2xl: 1.5rem;
  --nw-radius-full: 9999px;
  
  /* ============================================
     SHADOW TOKENS
     ============================================ */
  --nw-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --nw-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  --nw-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
  --nw-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
  --nw-shadow-glow: 0 0 20px var(--nw-ember-500);
  --nw-shadow-glow-gold: 0 0 20px var(--nw-gold-500);
  
  /* ============================================
     TRANSITION TOKENS
     ============================================ */
  --nw-transition-fast: 150ms ease;
  --nw-transition-normal: 250ms ease;
  --nw-transition-slow: 350ms ease;
  --nw-transition-bounce: 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Text Colors */
.nw-text-ember { color: var(--nw-ember-500); }
.nw-text-gold { color: var(--nw-gold-500); }
.nw-text-mystic { color: var(--nw-mystic-500); }

/* Background Colors */
.nw-bg-ember { background-color: var(--nw-ember-500); }
.nw-bg-gold { background-color: var(--nw-gold-500); }
.nw-bg-mystic { background-color: var(--nw-mystic-500); }
.nw-bg-dark { background-color: var(--nw-dark-950); }

/* Gradients */
.nw-gradient-ember {
  background: linear-gradient(135deg, var(--nw-ember-600), var(--nw-ember-400));
}
.nw-gradient-gold {
  background: linear-gradient(135deg, var(--nw-gold-600), var(--nw-gold-400));
}
.nw-gradient-mythic {
  background: linear-gradient(135deg, var(--nw-ember-500), var(--nw-gold-500), var(--nw-mystic-500));
}

/* Glow Effects */
.nw-glow-ember {
  box-shadow: var(--nw-shadow-glow);
}
.nw-glow-gold {
  box-shadow: var(--nw-shadow-glow-gold);
}

/* Font Utilities */
.nw-font-display { font-family: var(--nw-font-display); }
.nw-font-body { font-family: var(--nw-font-body); }
.nw-font-serif { font-family: var(--nw-font-serif); }
.nw-font-mono { font-family: var(--nw-font-mono); }

/* Rarity Badge Base */
.nw-rarity {
  display: inline-flex;
  align-items: center;
  padding: var(--nw-space-1) var(--nw-space-3);
  border-radius: var(--nw-radius-full);
  font-family: var(--nw-font-display);
  font-size: var(--nw-text-xs);
  font-weight: var(--nw-font-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.nw-rarity-common { background: var(--nw-common); color: white; }
.nw-rarity-uncommon { background: var(--nw-uncommon); color: white; }
.nw-rarity-rare { background: var(--nw-rare); color: white; }
.nw-rarity-epic { background: var(--nw-epic); color: white; }
.nw-rarity-legendary { background: var(--nw-legendary); color: var(--nw-dark-900); }
.nw-rarity-mythic { 
  background: linear-gradient(135deg, var(--nw-ember-500), var(--nw-gold-500));
  color: white;
  animation: nw-mythic-pulse 2s ease-in-out infinite;
}

/* Simple Animations - CSS only, very lightweight */
@keyframes nw-mythic-pulse {
  0%, 100% { box-shadow: 0 0 5px var(--nw-ember-500); }
  50% { box-shadow: 0 0 20px var(--nw-ember-500), 0 0 30px var(--nw-gold-500); }
}

@keyframes nw-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes nw-slide-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.nw-animate-fade-in { animation: nw-fade-in var(--nw-transition-normal); }
.nw-animate-slide-up { animation: nw-slide-up var(--nw-transition-normal); }