/**
 * WaitN Design System - CSS Variables
 * Base theme variables shared across all themes
 */

:root {
    /* ========================================
       NEUTRALS (Shared)
       ======================================== */
    --wn-white: #ffffff;
    --wn-black: #000000;
    --wn-gray-50: #f9fafb;
    --wn-gray-100: #f3f4f6;
    --wn-gray-200: #e5e7eb;
    --wn-gray-300: #d1d5db;
    --wn-gray-400: #9ca3af;
    --wn-gray-500: #6b7280;
    --wn-gray-600: #4b5563;
    --wn-gray-700: #374151;
    --wn-gray-800: #1f2937;
    --wn-gray-900: #111827;
    
    /* Slate scale (for dark themes) */
    --wn-slate-50: #f8fafc;
    --wn-slate-100: #f1f5f9;
    --wn-slate-200: #e2e8f0;
    --wn-slate-300: #cbd5e1;
    --wn-slate-400: #94a3b8;
    --wn-slate-500: #64748b;
    --wn-slate-600: #475569;
    --wn-slate-700: #334155;
    --wn-slate-800: #1e293b;
    --wn-slate-900: #0f172a;

    /* ========================================
       DYNAMIC PRIMARY COLORS (Settings Panel)
       These are updated by the settings panel JS
       ======================================== */
    --wn-primary: #3b82f6;
    --wn-primary-light: #dbeafe;
    --wn-primary-dark: #2563eb;
    --wn-primary-hover: #bfdbfe;
    --wn-secondary: #0ea5e9;
    --wn-accent: #06b6d4;
    
    /* Primary gradient (for headers) */
    --wn-gradient-primary: linear-gradient(135deg, var(--wn-primary) 0%, var(--wn-primary-dark) 100%);
    --wn-gradient-primary-vivid: linear-gradient(135deg, var(--wn-primary) 0%, var(--wn-accent) 100%);

    /* ========================================
       ADDITIONAL PALETTE COLORS
       ======================================== */
    --wn-teal: #0d9488;
    --wn-teal-light: #ccfbf1;
    --wn-teal-dark: #0f766e;
    --wn-teal-vivid: #14b8a6;
    --wn-teal-hover: #99f6e4;
    
    --wn-purple: #7c3aed;
    --wn-purple-light: #ede9fe;
    --wn-purple-dark: #6d28d9;
    --wn-purple-vivid: #a855f7;
    --wn-purple-hover: #c7d2fe;
    
    --wn-indigo: #6366f1;
    --wn-indigo-light: #e0e7ff;
    --wn-indigo-dark: #4f46e5;
    --wn-indigo-vivid: #8b5cf6;
    --wn-indigo-hover: #c7d2fe;
    
    --wn-amber: #f59e0b;
    --wn-amber-light: #fef3c7;
    --wn-amber-dark: #d97706;
    --wn-amber-vivid: #fbbf24;
    --wn-amber-hover: #fde68a;
    
    --wn-rose: #e11d48;
    --wn-rose-light: #ffe4e6;
    --wn-rose-dark: #be123c;
    --wn-rose-vivid: #fb7185;
    --wn-rose-hover: #fecdd3;
    
    --wn-cyan: #06b6d4;
    --wn-cyan-light: #cffafe;
    --wn-cyan-dark: #0891b2;
    --wn-cyan-hover: #a5f3fc;
    
    --wn-blue: #3b82f6;
    --wn-blue-light: #dbeafe;
    --wn-blue-dark: #2563eb;
    --wn-blue-vivid: #60a5fa;
    --wn-blue-hover: #bfdbfe;

    /* ========================================
       SEMANTIC COLORS (Shared)
       ======================================== */
    --wn-success: #10b981;
    --wn-success-light: #d1fae5;
    --wn-success-dark: #059669;
    --wn-success-vivid: #6ee7b7;
    --wn-success-border: #bbf7d0;
    
    --wn-warning: #f59e0b;
    --wn-warning-light: #fef3c7;
    --wn-warning-dark: #d97706;
    --wn-warning-vivid: #fbbf24;
    --wn-warning-border: #fde68a;
    
    --wn-error: #ef4444;
    --wn-error-light: #fee2e2;
    --wn-error-dark: #dc2626;
    --wn-error-vivid: #fca5a5;
    --wn-error-border: #fecaca;
    
    --wn-danger: #dc2626;
    --wn-danger-light: #fee2e2;
    --wn-danger-dark: #991b1b;
    --wn-danger-border: #fecaca;
    
    --wn-info: #3b82f6;
    --wn-info-light: #dbeafe;
    --wn-info-dark: #2563eb;
    --wn-info-border: #bae6fd;

    /* ========================================
       SPACING SCALE (8px base)
       ======================================== */
    --wn-space-0: 0;
    --wn-space-1: 4px;
    --wn-space-2: 8px;
    --wn-space-3: 12px;
    --wn-space-4: 16px;
    --wn-space-5: 20px;
    --wn-space-6: 24px;
    --wn-space-7: 32px;
    --wn-space-8: 40px;
    --wn-space-9: 48px;
    --wn-space-10: 64px;

    /* ========================================
       TYPOGRAPHY
       ======================================== */
    --wn-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    
    --wn-text-xs: 10px;
    --wn-text-sm: 12px;
    --wn-text-base: 14px;
    --wn-text-md: 16px;
    --wn-text-lg: 18px;
    --wn-text-xl: 20px;
    --wn-text-2xl: 24px;
    --wn-text-3xl: 30px;
    --wn-text-4xl: 36px;

    --wn-font-light: 300;
    --wn-font-normal: 400;
    --wn-font-medium: 500;
    --wn-font-semibold: 600;
    --wn-font-bold: 700;

    --wn-line-height-tight: 1.25;
    --wn-line-height-normal: 1.5;
    --wn-line-height-relaxed: 1.75;

    /* ========================================
       BORDER RADIUS
       ======================================== */
    --wn-rounded-none: 0;
    --wn-rounded-sm: 4px;
    --wn-rounded-md: 8px;
    --wn-rounded-lg: 12px;
    --wn-rounded-xl: 16px;
    --wn-rounded-2xl: 24px;
    --wn-rounded-full: 9999px;

    /* ========================================
       SHADOWS
       ======================================== */
    --wn-shadow-none: none;
    --wn-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --wn-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    --wn-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --wn-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --wn-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

    /* ========================================
       TRANSITIONS
       ======================================== */
    --wn-transition-fast: 150ms ease;
    --wn-transition-normal: 250ms ease;
    --wn-transition-slow: 350ms ease;

    /* ========================================
       Z-INDEX SCALE
       ======================================== */
    --wn-z-base: 0;
    --wn-z-dropdown: 100;
    --wn-z-sticky: 200;
    --wn-z-fixed: 300;
    --wn-z-modal: 400;
    --wn-z-popover: 500;
    --wn-z-tooltip: 600;
}

/* ============================================
   THEME: ADMIN
   Professional, data-focused dashboard theme
   ============================================ */
.theme-admin {
    --wn-primary: #475569;
    --wn-primary-light: #cbd5e1;
    --wn-primary-dark: #334155;
    
    --wn-accent: #4f46e5;
    --wn-accent-light: #e0e7ff;
    --wn-accent-dark: #4338ca;
    
    --wn-bg-app: #f8fafc;
    --wn-bg-card: #ffffff;
    --wn-bg-header: linear-gradient(135deg, #334155 0%, #1e293b 100%);
    --wn-bg-nav: #1e293b;
    
    --wn-text-primary: #1e293b;
    --wn-text-secondary: #64748b;
    --wn-text-muted: #94a3b8;
    --wn-text-inverse: #ffffff;
    
    --wn-border-color: #e2e8f0;
    --wn-border-focus: #4f46e5;
    
    --wn-nav-bg: #1e293b;
    --wn-nav-text: #94a3b8;
    --wn-nav-active: #ffffff;
    --wn-nav-active-bg: rgba(255, 255, 255, 0.1);
}

/* ============================================
   THEME: STAFF
   Functional, action-oriented operations theme
   ============================================ */
.theme-staff {
    --wn-primary: #2563eb;
    --wn-primary-light: #dbeafe;
    --wn-primary-dark: #1d4ed8;
    
    --wn-accent: #10b981;
    --wn-accent-light: #d1fae5;
    --wn-accent-dark: #059669;
    
    --wn-bg-app: #f9fafb;
    --wn-bg-card: #ffffff;
    --wn-bg-header: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    --wn-bg-nav: #ffffff;
    
    --wn-text-primary: #111827;
    --wn-text-secondary: #6b7280;
    --wn-text-muted: #9ca3af;
    --wn-text-inverse: #ffffff;
    
    --wn-border-color: #e5e7eb;
    --wn-border-focus: #2563eb;
    
    --wn-nav-bg: #ffffff;
    --wn-nav-text: #6b7280;
    --wn-nav-active: #2563eb;
    --wn-nav-active-bg: #dbeafe;
}

/* ============================================
   THEME: CUSTOMER
   Welcoming, approachable customer-facing theme
   ============================================ */
.theme-customer {
    --wn-primary: #0d9488;
    --wn-primary-light: #ccfbf1;
    --wn-primary-dark: #0f766e;
    
    --wn-accent: #f59e0b;
    --wn-accent-light: #fef3c7;
    --wn-accent-dark: #d97706;
    
    --wn-bg-app: #ffffff;
    --wn-bg-card: #ffffff;
    --wn-bg-header: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
    --wn-bg-nav: #ffffff;
    
    --wn-text-primary: #111827;
    --wn-text-secondary: #4b5563;
    --wn-text-muted: #9ca3af;
    --wn-text-inverse: #ffffff;
    
    --wn-border-color: #e5e7eb;
    --wn-border-focus: #0d9488;
    
    --wn-nav-bg: #ffffff;
    --wn-nav-text: #6b7280;
    --wn-nav-active: #0d9488;
    --wn-nav-active-bg: #ccfbf1;
}

/* ============================================
   GLOBAL DARK MODE
   Activated via data-mode="dark" on html
   ============================================ */
html[data-mode="dark"] {
    --wn-gray-50: #18181b;
    --wn-gray-100: #27272a;
    --wn-gray-200: #3f3f46;
    --wn-gray-300: #52525b;
    --wn-gray-400: #71717a;
    --wn-gray-500: #a1a1aa;
    --wn-gray-600: #d4d4d8;
    --wn-gray-700: #e4e4e7;
    --wn-gray-800: #f4f4f5;
    --wn-gray-900: #fafafa;
}

html[data-mode="dark"] .theme-admin,
html[data-mode="dark"] .theme-staff,
html[data-mode="dark"] .theme-customer,
html[data-mode="dark"] body {
    --wn-bg-app: #0f172a;
    --wn-bg-card: #1e293b;
    --wn-bg-surface: #334155;
    
    --wn-text-primary: #f1f5f9;
    --wn-text-secondary: #94a3b8;
    --wn-text-muted: #64748b;
    --wn-text-inverse: #0f172a;
    
    --wn-border-color: #334155;
    
    --wn-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
    --wn-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --wn-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
}

/* Dark mode for design system demo page */
html[data-mode="dark"] .design-system-page {
    background: linear-gradient(135deg, #0f172a 0%, #1e1e2e 100%) !important;
}

html[data-mode="dark"] .demo-main {
    color: #f1f5f9;
}

html[data-mode="dark"] .component-section {
    background: #1e293b;
    border-color: #334155;
}

html[data-mode="dark"] .component-section-title {
    color: #f1f5f9;
}

html[data-mode="dark"] .component-demo {
    background: #0f172a;
    border-color: #334155;
}

html[data-mode="dark"] .wn-phone-screen {
    background: #1e293b;
}

html[data-mode="dark"] .wn-app-content {
    background: #0f172a;
}

/* ============================================
   DEFAULT PRIMARY COLORS (Overridable)
   These can be changed via JavaScript
   ============================================ */
:root {
    --wn-primary: #3b82f6;
    --wn-primary-light: #dbeafe;
    --wn-primary-dark: #2563eb;
    --wn-secondary: #0ea5e9;
    --wn-accent: #06b6d4;
}