/* ═══════════════════════════════════════════════════════════════════════════
   HYTALE SERVER - DESIGN SYSTEM VARIABLES
   Dark Fantasy Ethereal Theme
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ─── Color Palette ─────────────────────────────────────────────────────── */
  
  /* Backgrounds - Deep mystical depths */
  --color-bg-deep: hsl(220, 25%, 6%);
  --color-bg-surface: hsl(220, 20%, 10%);
  --color-bg-elevated: hsl(220, 18%, 14%);
  --color-bg-card: hsl(220, 20%, 12%);
  
  /* Primary - Ethereal Cyan */
  --color-primary: hsl(185, 80%, 50%);
  --color-primary-dim: hsl(185, 70%, 35%);
  --color-primary-bright: hsl(185, 90%, 65%);
  --color-primary-rgb: 26, 198, 204;
  
  /* Secondary - Mystic Purple */
  --color-secondary: hsl(270, 60%, 55%);
  --color-secondary-dim: hsl(270, 50%, 40%);
  --color-secondary-bright: hsl(270, 70%, 70%);
  --color-secondary-rgb: 138, 92, 204;
  
  /* Accent - Legendary Gold */
  --color-gold: hsl(45, 90%, 55%);
  --color-gold-dim: hsl(45, 80%, 40%);
  --color-gold-bright: hsl(45, 95%, 70%);
  
  /* Semantic Colors */
  --color-success: hsl(145, 65%, 45%);
  --color-danger: hsl(0, 70%, 55%);
  --color-warning: hsl(35, 90%, 55%);
  
  /* Text */
  --color-text-primary: hsl(0, 0%, 92%);
  --color-text-secondary: hsl(220, 15%, 75%);
  --color-text-muted: hsl(220, 10%, 50%);
  
  /* Borders & Dividers */
  --color-border: hsl(220, 20%, 20%);
  --color-border-glow: hsla(185, 80%, 50%, 0.3);
  
  /* ─── Typography ────────────────────────────────────────────────────────── */
  
  --font-display: 'Cinzel Decorative', 'Cinzel', serif;
  --font-heading: 'Cinzel', serif;
  --font-body: 'Outfit', sans-serif;
  
  /* Type Scale - Fluid with clamp */
  --text-xs: clamp(0.7rem, 0.8vw, 0.8rem);
  --text-sm: clamp(0.8rem, 1vw, 0.9rem);
  --text-base: clamp(0.95rem, 1.1vw, 1.05rem);
  --text-lg: clamp(1.1rem, 1.4vw, 1.25rem);
  --text-xl: clamp(1.3rem, 1.8vw, 1.5rem);
  --text-2xl: clamp(1.6rem, 2.5vw, 2rem);
  --text-3xl: clamp(2rem, 3.5vw, 2.75rem);
  --text-4xl: clamp(2.5rem, 5vw, 4rem);
  --text-hero: clamp(3rem, 8vw, 6rem);
  
  /* Line Heights */
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;
  
  /* Letter Spacing */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;
  --tracking-wider: 0.1em;
  --tracking-widest: 0.2em;
  
  /* ─── Spacing Scale ─────────────────────────────────────────────────────── */
  
  --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;
  --space-32: 8rem;
  
  /* ─── Layout ────────────────────────────────────────────────────────────── */
  
  --container-max: 1400px;
  --container-padding: clamp(1rem, 5vw, 3rem);
  
  /* ─── Effects ───────────────────────────────────────────────────────────── */
  
  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-glow-primary: 0 0 30px rgba(var(--color-primary-rgb), 0.4);
  --shadow-glow-secondary: 0 0 30px rgba(var(--color-secondary-rgb), 0.4);
  
  /* Blur */
  --blur-sm: blur(4px);
  --blur-md: blur(8px);
  --blur-lg: blur(16px);
  --blur-glass: blur(12px);
  
  /* Borders */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  
  /* Transitions */
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --duration-slower: 800ms;
  
  /* ─── Z-Index Scale ─────────────────────────────────────────────────────── */
  
  --z-base: 0;
  --z-above: 10;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal: 400;
  --z-tooltip: 500;
}