/* ============================================
   Multi-Theme System
   Targeting young audience - vibrant & trendy
   ============================================ */

/* Add --gradient-header to default :root */
:root {
  --gradient-header: linear-gradient(135deg, #FF6B35 0%, #FF8C42 50%, #FFA559 100%);
}

/* ---- Theme: Warm Orange (default) ---- */
:root[data-theme="warm-orange"] {
  --color-primary: #FF6B35;
  --color-primary-light: #FFE8DE;
  --color-primary-dark: #E85D2A;
  --color-amber: #F7931E;
  --color-amber-light: #FFF4E0;
  --color-accent-red: #FF4757;
  --color-accent-pink: #FF6B9D;
  --color-success: #2ED573;
  --color-success-light: #E8FBEF;

  --color-bg: #FFF8F3;
  --color-bg-warm: #FFF3E8;
  --color-card: #FFFFFF;
  --color-card-hover: #FFFCF8;

  --color-text-primary: #2D1B0E;
  --color-text-secondary: #8B7355;
  --color-text-tertiary: #C4A882;
  --color-text-inverse: #FFFFFF;

  --color-border: #F5E6D8;
  --color-border-light: #FAEEDD;
  --color-divider: #F0E0D0;

  --shadow-card-hover: 0 8px 28px rgba(255, 107, 53, 0.12);
  --shadow-float: 0 8px 32px rgba(255, 107, 53, 0.25);

  --gradient-header: linear-gradient(135deg, #FF6B35 0%, #FF8C42 50%, #FFA559 100%);
}

/* ---- Theme: Peach Pink ---- */
:root[data-theme="peach-pink"] {
  --color-primary: #FF6B9D;
  --color-primary-light: #FFE4EE;
  --color-primary-dark: #E85585;
  --color-amber: #FFA0C8;
  --color-amber-light: #FFF0F6;
  --color-accent-red: #FF4757;
  --color-accent-pink: #FF85B3;
  --color-success: #2ED573;
  --color-success-light: #E8FBEF;

  --color-bg: #FFF5F8;
  --color-bg-warm: #FFEEF3;
  --color-card: #FFFFFF;
  --color-card-hover: #FFFAFC;

  --color-text-primary: #3D1B2E;
  --color-text-secondary: #8B5575;
  --color-text-tertiary: #C88AAD;
  --color-text-inverse: #FFFFFF;

  --color-border: #F5DDE8;
  --color-border-light: #FAEAF1;
  --color-divider: #F0D5E0;

  --shadow-card-hover: 0 8px 28px rgba(255, 107, 157, 0.12);
  --shadow-float: 0 8px 32px rgba(255, 107, 157, 0.25);

  --gradient-header: linear-gradient(135deg, #FF6B9D 0%, #FF8FB8 50%, #FFB3D1 100%);
}

/* ---- Theme: Mint Green ---- */
:root[data-theme="mint-green"] {
  --color-primary: #00B894;
  --color-primary-light: #D4F5E5;
  --color-primary-dark: #009B7D;
  --color-amber: #55D4B5;
  --color-amber-light: #E0F8F0;
  --color-accent-red: #FF4757;
  --color-accent-pink: #FF6B9D;
  --color-success: #2ED573;
  --color-success-light: #E8FBEF;

  --color-bg: #F0FBF7;
  --color-bg-warm: #E5F8F0;
  --color-card: #FFFFFF;
  --color-card-hover: #F8FEFB;

  --color-text-primary: #0D2E22;
  --color-text-secondary: #4A7B68;
  --color-text-tertiary: #8AB5A0;
  --color-text-inverse: #FFFFFF;

  --color-border: #D5EDE2;
  --color-border-light: #E8F5EF;
  --color-divider: #C8E5D8;

  --shadow-card-hover: 0 8px 28px rgba(0, 184, 148, 0.12);
  --shadow-float: 0 8px 32px rgba(0, 184, 148, 0.25);

  --gradient-header: linear-gradient(135deg, #00B894 0%, #26D0A8 50%, #4DDEBE 100%);
}

/* ---- Theme: Minimal White ---- */
:root[data-theme="minimal-white"] {
  --color-primary: #2D3436;
  --color-primary-light: #F0F0F0;
  --color-primary-dark: #1A1F20;
  --color-amber: #636E72;
  --color-amber-light: #F5F5F5;
  --color-accent-red: #FF4757;
  --color-accent-pink: #FF6B9D;
  --color-success: #2ED573;
  --color-success-light: #E8FBEF;

  --color-bg: #FAFAFA;
  --color-bg-warm: #F5F5F5;
  --color-card: #FFFFFF;
  --color-card-hover: #FCFCFC;

  --color-text-primary: #2D3436;
  --color-text-secondary: #636E72;
  --color-text-tertiary: #A0A5A8;
  --color-text-inverse: #FFFFFF;

  --color-border: #ECECEC;
  --color-border-light: #F5F5F5;
  --color-divider: #E0E0E0;

  --shadow-card-hover: 0 8px 28px rgba(45, 52, 54, 0.08);
  --shadow-float: 0 8px 32px rgba(45, 52, 54, 0.15);

  --gradient-header: linear-gradient(135deg, #2D3436 0%, #4A5052 50%, #636E72 100%);
}

/* ---- Theme: Starry Purple ---- */
:root[data-theme="starry-purple"] {
  --color-primary: #6C5CE7;
  --color-primary-light: #E8E4FD;
  --color-primary-dark: #5849C4;
  --color-amber: #A29BFE;
  --color-amber-light: #F0EDFE;
  --color-accent-red: #FF4757;
  --color-accent-pink: #FF6B9D;
  --color-success: #2ED573;
  --color-success-light: #E8FBEF;

  --color-bg: #F8F6FE;
  --color-bg-warm: #F3F0FD;
  --color-card: #FFFFFF;
  --color-card-hover: #FCFAFF;

  --color-text-primary: #1E1535;
  --color-text-secondary: #6B5D9E;
  --color-text-tertiary: #A89BC8;
  --color-text-inverse: #FFFFFF;

  --color-border: #E5DEF8;
  --color-border-light: #F0EBFD;
  --color-divider: #D8D0F0;

  --shadow-card-hover: 0 8px 28px rgba(108, 92, 231, 0.12);
  --shadow-float: 0 8px 32px rgba(108, 92, 231, 0.25);

  --gradient-header: linear-gradient(135deg, #6C5CE7 0%, #8B7FF0 50%, #A29BFE 100%);
}

/* ---- Theme: Ocean Blue ---- */
:root[data-theme="ocean-blue"] {
  --color-primary: #0984E3;
  --color-primary-light: #D6ECFB;
  --color-primary-dark: #076BB8;
  --color-amber: #74B9FF;
  --color-amber-light: #E8F4FE;
  --color-accent-red: #FF4757;
  --color-accent-pink: #FF6B9D;
  --color-success: #2ED573;
  --color-success-light: #E8FBEF;

  --color-bg: #F0F8FE;
  --color-bg-warm: #E5F3FC;
  --color-card: #FFFFFF;
  --color-card-hover: #F8FBFE;

  --color-text-primary: #0D2138;
  --color-text-secondary: #4A6B8B;
  --color-text-tertiary: #8AABCA;
  --color-text-inverse: #FFFFFF;

  --color-border: #D5E5F5;
  --color-border-light: #E8F2FA;
  --color-divider: #C8DCEC;

  --shadow-card-hover: 0 8px 28px rgba(9, 132, 227, 0.12);
  --shadow-float: 0 8px 32px rgba(9, 132, 227, 0.25);

  --gradient-header: linear-gradient(135deg, #0984E3 0%, #3FA0F0 50%, #74B9FF 100%);
}

/* ============================================
   Theme Switcher UI
   ============================================ */
.theme-switcher {
  position: fixed;
  bottom: 80px;
  right: 20px;
  z-index: 9999;
  font-family: 'Noto Sans SC', 'PingFang SC', -apple-system, BlinkMacSystemFont, sans-serif;
}

.theme-switcher-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: var(--gradient-header);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
}

.theme-switcher-btn:hover {
  transform: scale(1.1) rotate(15deg);
}

.theme-switcher-btn svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-switcher-btn .theme-pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.3);
  animation: themePulse 2s ease-out infinite;
}

@keyframes themePulse {
  0% { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(1.5); opacity: 0; }
}

.theme-switcher-panel {
  position: absolute;
  bottom: 60px;
  right: 0;
  background: var(--color-card);
  border-radius: 20px;
  box-shadow: 0 12px 48px rgba(0,0,0,0.18);
  padding: 16px;
  min-width: 220px;
  opacity: 0;
  transform: translateY(10px) scale(0.95);
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid var(--color-border);
}

.theme-switcher-panel.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.theme-switcher-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-secondary);
  margin-bottom: 12px;
  padding: 0 4px;
  letter-spacing: 0.5px;
}

.theme-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.theme-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 14px;
  cursor: pointer;
  border: 2px solid transparent;
  background: var(--color-bg-warm);
  transition: all 0.2s ease;
  font-size: 13px;
  color: var(--color-text-primary);
  font-weight: 500;
}

.theme-option:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.theme-option.active {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

.theme-swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.4);
}

/* Swatch colors per theme */
.theme-swatch[data-swatch="warm-orange"] { background: linear-gradient(135deg, #FF6B35, #FFA559); }
.theme-swatch[data-swatch="peach-pink"] { background: linear-gradient(135deg, #FF6B9D, #FFB3D1); }
.theme-swatch[data-swatch="mint-green"] { background: linear-gradient(135deg, #00B894, #4DDEBE); }
.theme-swatch[data-swatch="minimal-white"] { background: linear-gradient(135deg, #2D3436, #A0A5A8); }
.theme-swatch[data-swatch="starry-purple"] { background: linear-gradient(135deg, #6C5CE7, #A29BFE); }
.theme-swatch[data-swatch="ocean-blue"] { background: linear-gradient(135deg, #0984E3, #74B9FF); }

/* Smooth theme transition */
*, *::before, *::after {
  transition-property: background-color, border-color, color, box-shadow;
  transition-duration: 0s;
}

body, .header, .app, .card, .table-card, .modal, .toast,
.btn-primary, .btn-ghost, .btn-danger, .tag,
.form-input, .form-select, .dish-card, .category-chip,
.cart-bar, .stat-card, .order-card, .kitchen-column,
.login-container, .login-card, .kds-card {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Mobile: move switcher up a bit */
@media (max-width: 600px) {
  .theme-switcher {
    bottom: 72px;
    right: 16px;
  }
  .theme-switcher-btn {
    width: 42px;
    height: 42px;
  }
  .theme-switcher-panel {
    min-width: 200px;
    right: -8px;
  }
}