/* ==========================================================================
   Design System & Multi-Theme Palette Engine - GourmetPulse POS
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

:root {
  /* Default Theme: Obsidian Indigo (Dark) */
  --bg-primary: #090d16;
  --bg-secondary: #0f172a;
  --bg-surface: #1e293b;
  --bg-surface-hover: #334155;
  --bg-glass: rgba(30, 41, 59, 0.7);
  --bg-glass-card: rgba(15, 23, 42, 0.65);
  
  --border-color: rgba(255, 255, 255, 0.08);
  --border-focus: rgba(99, 102, 241, 0.5);
  --border-accent: rgba(16, 185, 129, 0.3);

  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --text-inverse: #0f172a;

  /* Accents */
  --accent-primary: #6366f1;
  --accent-primary-hover: #4f46e5;
  --accent-success: #10b981;
  --accent-success-hover: #059669;
  --accent-warning: #f59e0b;
  --accent-danger: #ef4444;
  --accent-info: #06b6d4;
  --accent-purple: #a855f7;

  /* States */
  --state-available: #10b981;
  --state-occupied: #f59e0b;
  --state-reserved: #3b82f6;
  --state-billing: #a855f7;

  /* Gradients */
  --gradient-brand: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%);
  --gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
  --gradient-warning: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);

  /* Typography */
  --font-family: 'Outfit', 'Plus Jakarta Sans', -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Shadows */
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 20px rgba(99, 102, 241, 0.35);

  --header-height: 72px;
  --cart-width: 420px;
  --border-radius-sm: 8px;
  --border-radius-md: 14px;
  --border-radius-lg: 20px;
  --border-radius-xl: 28px;
  
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 2. Theme: Emerald Gold (Luxury Dining) */
[data-theme="emerald"] {
  --bg-primary: #06140e;
  --bg-secondary: #0a2117;
  --bg-surface: #123325;
  --bg-surface-hover: #1b4935;
  --border-color: rgba(255, 255, 255, 0.1);
  --border-focus: rgba(16, 185, 129, 0.6);
  --text-primary: #f0fdf4;
  --text-secondary: #a7f3d0;
  --text-muted: #6ee7b7;
  --accent-primary: #10b981;
  --accent-primary-hover: #059669;
  --gradient-brand: linear-gradient(135deg, #10b981 0%, #f59e0b 100%);
  --shadow-glow: 0 0 20px rgba(16, 185, 129, 0.4);
}

/* 3. Theme: Sapphire Midnight (Deep Blue) */
[data-theme="sapphire"] {
  --bg-primary: #030712;
  --bg-secondary: #0b1329;
  --bg-surface: #162447;
  --bg-surface-hover: #1f3463;
  --border-color: rgba(255, 255, 255, 0.1);
  --border-focus: rgba(59, 130, 246, 0.6);
  --text-primary: #f0f6ff;
  --text-secondary: #bfdbfe;
  --text-muted: #93c5fd;
  --accent-primary: #3b82f6;
  --accent-primary-hover: #2563eb;
  --gradient-brand: linear-gradient(135deg, #3b82f6 0%, #06b6d4 100%);
  --shadow-glow: 0 0 20px rgba(59, 130, 246, 0.4);
}

/* 4. Theme: Sunset Amber (Copper & Warm Glow) */
[data-theme="amber"] {
  --bg-primary: #180c04;
  --bg-secondary: #271408;
  --bg-surface: #3c200c;
  --bg-surface-hover: #522c11;
  --border-color: rgba(255, 255, 255, 0.1);
  --border-focus: rgba(245, 158, 11, 0.6);
  --text-primary: #fffbeb;
  --text-secondary: #fde68a;
  --text-muted: #fcd34d;
  --accent-primary: #f59e0b;
  --accent-primary-hover: #d97706;
  --gradient-brand: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
  --shadow-glow: 0 0 20px rgba(245, 158, 11, 0.4);
}

/* 5. Theme: Velvet Rose (Wine & Violet) */
[data-theme="rose"] {
  --bg-primary: #12070a;
  --bg-secondary: #210d14;
  --bg-surface: #351621;
  --bg-surface-hover: #4a1e2f;
  --border-color: rgba(255, 255, 255, 0.1);
  --border-focus: rgba(244, 63, 94, 0.6);
  --text-primary: #fff1f2;
  --text-secondary: #fecdd3;
  --text-muted: #fda4af;
  --accent-primary: #f43f5e;
  --accent-primary-hover: #e11d48;
  --gradient-brand: linear-gradient(135deg, #f43f5e 0%, #a855f7 100%);
  --shadow-glow: 0 0 20px rgba(244, 63, 94, 0.4);
}

/* 6. Theme: Minimal Light Mode */
[data-theme="light"] {
  --bg-primary: #f1f5f9;
  --bg-secondary: #ffffff;
  --bg-surface: #ffffff;
  --bg-surface-hover: #e2e8f0;
  --bg-glass: rgba(255, 255, 255, 0.85);
  --bg-glass-card: rgba(255, 255, 255, 0.9);
  
  --border-color: rgba(0, 0, 0, 0.08);
  --border-focus: rgba(99, 102, 241, 0.6);
  --border-accent: rgba(16, 185, 129, 0.4);

  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
  --text-inverse: #ffffff;

  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.12);
  --shadow-glow: 0 4px 15px rgba(99, 102, 241, 0.2);
}