/**
 * DLM Capsules - Design Tokens
 * 
 * CSS Custom Properties extracted from waiting-room.php "Cosmic" theme
 * This file provides the foundation for consistent styling across all frontend templates.
 * 
 * @since 1.1.0
 */

:root {
  /* ========================================
     COLOR PALETTE - Cosmic Dark Theme
     ======================================== */
  
  /* Background Colors */
  --dlm-bg-primary: #020617;              /* slate-950 - Main page background */
  --dlm-bg-secondary: rgba(255,255,255,0.03);  /* Glass card background */
  --dlm-bg-tertiary: rgba(255,255,255,0.05);   /* Hover/focus states */
  --dlm-bg-elevated: rgba(255,255,255,0.08);   /* Elevated elements */
  
  /* Text Colors */
  --dlm-text-primary: #e2e8f0;            /* slate-200 - Main text */
  --dlm-text-secondary: #94a3b8;          /* slate-400 - Secondary text */
  --dlm-text-muted: #64748b;              /* slate-500 - Muted/placeholder */
  --dlm-text-bright: #ffffff;             /* Pure white for emphasis */
  
  /* Accent Colors */
  --dlm-accent-pink: #db2777;             /* pink-600 - Primary accent */
  --dlm-accent-rose: #e11d48;             /* rose-600 - Secondary accent */
  --dlm-accent-violet: #7c3aed;           /* violet-600 - Tertiary accent */
  --dlm-accent-gradient: linear-gradient(135deg, #db2777, #e11d48);
  --dlm-accent-gradient-hover: linear-gradient(135deg, #be185d, #be123c);
  
  /* Border Colors */
  --dlm-border-subtle: rgba(255,255,255,0.05);
  --dlm-border-default: rgba(255,255,255,0.1);
  --dlm-border-strong: rgba(255,255,255,0.2);
  
  /* Status Colors */
  --dlm-success: #22c55e;                 /* green-500 */
  --dlm-success-bg: rgba(34, 197, 94, 0.1);
  --dlm-success-border: rgba(34, 197, 94, 0.3);
  
  --dlm-error: #ef4444;                   /* red-500 */
  --dlm-error-bg: rgba(239, 68, 68, 0.1);
  --dlm-error-border: rgba(239, 68, 68, 0.3);
  
  --dlm-warning: #f59e0b;                 /* amber-500 */
  --dlm-warning-bg: rgba(245, 158, 11, 0.1);
  --dlm-warning-border: rgba(245, 158, 11, 0.3);
  
  --dlm-info: #3b82f6;                    /* blue-500 */
  --dlm-info-bg: rgba(59, 130, 246, 0.1);
  --dlm-info-border: rgba(59, 130, 246, 0.3);
  
  /* ========================================
     TYPOGRAPHY
     ======================================== */
  
  --dlm-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --dlm-font-display: 'Outfit', var(--dlm-font-sans);
  
  /* Font Sizes */
  --dlm-text-xs: 0.75rem;                 /* 12px */
  --dlm-text-sm: 0.875rem;                /* 14px */
  --dlm-text-base: 1rem;                  /* 16px */
  --dlm-text-lg: 1.125rem;                /* 18px */
  --dlm-text-xl: 1.25rem;                 /* 20px */
  --dlm-text-2xl: 1.5rem;                 /* 24px */
  --dlm-text-3xl: 2rem;                   /* 32px */
  --dlm-text-4xl: 2.5rem;                 /* 40px */
  
  /* Line Heights */
  --dlm-leading-tight: 1.2;
  --dlm-leading-normal: 1.5;
  --dlm-leading-relaxed: 1.75;
  
  /* ========================================
     SPACING
     ======================================== */
  
  --dlm-space-xs: 0.25rem;                /* 4px */
  --dlm-space-sm: 0.5rem;                 /* 8px */
  --dlm-space-md: 1rem;                   /* 16px */
  --dlm-space-lg: 1.5rem;                 /* 24px */
  --dlm-space-xl: 2rem;                   /* 32px */
  --dlm-space-2xl: 3rem;                  /* 48px */
  --dlm-space-3xl: 4rem;                  /* 64px */
  
  /* ========================================
     BORDER RADIUS
     ======================================== */
  
  --dlm-radius-xs: 0.25rem;               /* 4px */
  --dlm-radius-sm: 0.5rem;                /* 8px */
  --dlm-radius-md: 1rem;                  /* 16px */
  --dlm-radius-lg: 1.5rem;                /* 24px */
  --dlm-radius-xl: 2rem;                  /* 32px */
  --dlm-radius-full: 9999px;              /* Pill shape */
  
  /* ========================================
     SHADOWS
     ======================================== */
  
  --dlm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --dlm-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --dlm-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5);
  --dlm-shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
  --dlm-shadow-glow: 0 0 20px rgba(219, 39, 119, 0.5);
  --dlm-shadow-glow-strong: 0 0 30px rgba(219, 39, 119, 0.7);
  
  /* ========================================
     TRANSITIONS
     ======================================== */
  
  --dlm-transition-fast: 0.15s ease;
  --dlm-transition-base: 0.2s ease;
  --dlm-transition-slow: 0.3s ease;
  --dlm-transition-bounce: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  /* ========================================
     Z-INDEX SCALE
     ======================================== */
  
  --dlm-z-base: 1;
  --dlm-z-dropdown: 10;
  --dlm-z-sticky: 20;
  --dlm-z-modal: 50;
  --dlm-z-toast: 100;
  
  /* ========================================
     LAYOUT
     ======================================== */
  
  --dlm-container-sm: 400px;
  --dlm-container-md: 600px;
  --dlm-container-lg: 800px;
  --dlm-container-xl: 1200px;
}

/* ========================================
   GOOGLE FONTS IMPORT
   ======================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@400;500;600;700&display=swap');