/* ===== THEMES.CSS — versione ottimizzata ===== */

/* === BASE === */
:root[data-theme="base"] {
  --color-primary: #08abf1;
  --color-primary-ink: #fff;
  --color-bg: #fff;
  --color-surface: #f7f9fc;
  --color-elev: #f1f4f8;
  --color-text: #1c1b17;
  --color-text-weak: #4b5563;
  --color-text-inv: #fff;
  --color-border: #dde2e5;
  --color-muted: #e9eef2;
  --color-accent: #09dbd8;
  --color-logo-bg: #ffffff;
  --color-card-bg: #ffffff;
  --danger-500: #e63946;
  --success-500: #16a34a;
  --warning-500: #eab308;
  --shadow-color: 220deg 10% 20%;
}

/* === VAS === */
:root[data-theme="vas"] {
  --color-primary: #6a72d9;
  --color-primary-ink: #fff;
  --color-bg: #fff;
  --color-surface: #f4f6ff;
  --color-elev: #e7e9fc;
  --color-text: #1f2937;
  --color-text-weak: #4a4f5c;
  --color-text-inv: #fff;
  --color-border: #ccd3eb;
  --color-muted: #e8ecff;
  --color-accent: #09dbd8;
  --color-logo-bg: #f4f6ff;
  --color-card-bg: #f8f9ff;
  --danger-500: #e63946;
  --success-500: #16a34a;
  --warning-500: #eab308;
  --shadow-color: 240deg 20% 30%;
}

/* === ELEGANT (dark refined) === */
:root[data-theme="elegant"] {
  --color-bg: #181818;
  --color-surface: #202020;
  --color-elev: #2a2a2a;
  --color-text: #f3f3f3;
  --color-text-weak: #c8c8c8;
  --color-text-inv: #f3f3f3;
  --color-primary: #d6b66f;
  --color-primary-ink: #1a1a1a;
  --color-accent: #8bc6ec;
  --color-border: #404040;
  --color-muted: #252525;
  --color-logo-bg: #f3f3f3;
  --color-card-bg: #262626;
  --danger-500: #ef4444;
  --success-500: #22c55e;
  --warning-500: #facc15;
  --shadow-color: 0deg 0% 0%;
  --alpha-08: 0.25;
  --alpha-12: 0.35;
  --alpha-16: 0.45;
}

/* === ORANGE THEME === */
:root[data-theme="orange"] {
  --color-primary: hsl(28 90% 48%);
  --color-primary-ink: #fff;
  --color-accent: hsl(40 90% 50%);
  --color-bg: hsl(30 100% 97%);
  --color-surface: hsl(28 100% 99%);
  --color-elev: hsl(28 90% 96%);
  --color-text: hsl(20 28% 14%);
  --color-text-weak: hsl(20 18% 32%);
  --color-text-inv: #fff;
  --color-border: hsl(28 35% 78%);
  --color-muted: hsl(28 60% 94%);
  --color-logo-bg: hsl(28 100% 96%);
  --color-card-bg: hsl(28 100% 99%);
  --success-500: hsl(145 60% 40%);
  --warning-500: hsl(40 90% 50%);
  --danger-500: hsl(0 75% 55%);
  --shadow-color: 30deg 50% 20%;
}

/* === BLUE DARK THEME === */
:root[data-theme="blue-dark"] {
  --color-primary: hsl(210 80% 62%);
  --color-primary-ink: #fff;
  --color-accent: hsl(200 85% 58%);
  --color-bg: hsl(220 35% 10%);
  --color-surface: hsl(220 30% 14%);
  --color-elev: hsl(220 28% 18%);
  --color-text: hsl(210 20% 96%);
  --color-text-weak: hsl(210 18% 76%);
  --color-text-inv: hsl(210 20% 96%);
  --color-border: hsl(220 22% 32%);
  --color-muted: hsl(220 28% 20%);
  --color-logo-bg: hsl(210 20% 96%);
  --color-card-bg: hsl(220 25% 20%);
  --success-500: hsl(155 65% 45%);
  --warning-500: hsl(45 90% 60%);
  --danger-500: hsl(0 75% 60%);
  --shadow-color: 220deg 40% 5%;
  --alpha-08: 0.08;
  --alpha-12: 0.12;
  --alpha-16: 0.16;
}

/* === AURORA === */
:root[data-theme="aurora"] {
  --color-bg: hsl(230 35% 10%);
  --color-surface: hsl(230 30% 15%);
  --color-elev: hsl(230 25% 20%);
  --color-card-bg: hsl(230 25% 22%);
  --color-logo-bg: hsl(165 75% 60%);
  --color-text: hsl(180 25% 96%);
  --color-text-weak: hsl(180 18% 78%);
  --color-text-inv: hsl(180 25% 96%);
  --color-primary: hsl(165 75% 58%);
  --color-primary-ink: #001b18;
  --color-accent: hsl(300 60% 65%);
  --color-border: hsl(230 20% 34%);
  --color-muted: hsl(230 25% 22%);
  --success-500: hsl(145 60% 45%);
  --warning-500: hsl(45 90% 60%);
  --danger-500: hsl(355 70% 60%);
  --shadow-color: 220deg 40% 5%;
  --alpha-08: 0.10;
  --alpha-12: 0.18;
  --alpha-16: 0.25;
}

/* === Transizioni cromatiche === */
html[data-theme] {
  transition: background-color .3s ease, color .3s ease;
}

/* === Fix comuni per dark themes (elegant + blue-dark) === */
[data-theme="elegant"] .container-logo-client,
[data-theme="blue-dark"] .container-logo-client,
[data-theme="aurora"] .container-logo-client {
  background: var(--color-text);
  border-radius: 5px;
  padding: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px hsl(var(--shadow-color) / var(--alpha-12));
}

/* === Icone & Simboli === */
[data-theme="elegant"] .icon-type,
[data-theme="blue-dark"] .icon-type,
[data-theme="aurora"] .icon-type,
[data-theme="elegant"] .icon-allergene,
[data-theme="blue-dark"] .icon-allergene,
[data-theme="aurora"] .icon-allergene,
[data-theme="elegant"] .i-symbol,
[data-theme="blue-dark"] .i-symbol,
[data-theme="aurora"] .i-symbol,
[data-theme="elegant"] .info-icon,
[data-theme="blue-dark"] .info-icon,
[data-theme="aurora"] .info-icon {
  background-color: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  font-size: 13px;
  transition: background .2s ease, color .2s ease, border .2s ease;
}

[data-theme="elegant"] .icon-type:hover,
[data-theme="blue-dark"] .icon-type:hover,
[data-theme="aurora"] .icon-type:hover,
[data-theme="elegant"] .icon-allergene:hover,
[data-theme="blue-dark"] .icon-allergene:hover,
[data-theme="aurora"] .icon-allergene:hover,
[data-theme="elegant"] .i-symbol:hover,
[data-theme="blue-dark"] .i-symbol:hover,
[data-theme="aurora"] .i-symbol:hover {
  background-color: var(--color-primary);
  color: var(--color-primary-ink);
  border-color: var(--color-primary);
}
.icon-cart {
  color: var(--color-text);
  width: 32px;
  height: 28px;
  display: inline-block;
  vertical-align: middle;
  transition: color 0.25s ease, transform 0.2s ease;
}

/* Hover interattivo */
.icon-cart:hover {
  color: var(--color-primary);
  transform: scale(1.1);
}
[data-theme="elegant"] .icon-cart,
[data-theme="blue-dark"] .icon-cart,
[data-theme="aurora"] .icon-cart {
  color: var(--color-text);
}

/* Hover nei dark theme */
[data-theme="elegant"] .icon-cart:hover {
  color: var(--color-primary); /* oro */
}
[data-theme="blue-dark"] .icon-cart:hover {
  color: var(--color-accent); /* blu acceso */
}

/* === Icone generali === */
.icon-close,
.icon-footer {
  width: 22px;
  height: 22px;
  color: var(--color-text);
  transition: color 0.2s ease;
  vertical-align: middle;
}
.icon-cart { width: 32px; height: 32px; }

.icon-close:hover,
.icon-footer:hover {
  color: var(--color-primary);
}

/* adattamento per dark themes */
[data-theme="elegant"] .icon-close,
[data-theme="elegant"] .icon-cart,
[data-theme="elegant"] .icon-footer,
[data-theme="blue-dark"] .icon-close,
[data-theme="blue-dark"] .icon-footer,
[data-theme="aurora"] .icon-close,
[data-theme="aurora"] .icon-cart,
[data-theme="aurora"] .icon-footer {
  color: var(--color-text);
}

/* === Badge carrello === */
.cart-count {
  background: var(--danger-500);
  color: #fff;
  border: 1px solid hsl(0 0% 100% / .25);
  font-size: 11px;
  font-weight: 700;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
}

/* === Immagini (piatti + dettaglio) === */
.piatto-image,
.dettaglio-piatto-image {
  width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
  background: var(--color-muted);
  transition: opacity 0.4s ease;
}
.piatto-image.fade-in,
.dettaglio-piatto-image.fade-in { opacity: 1; }

.piatto-image.placeholder,
.dettaglio-piatto-image.placeholder {
  width: 160px;
  height: 160px;
  object-fit: contain;
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: 50%;
  display: block;
  margin: 20px auto;
  padding: 16px;
  filter: grayscale(1) brightness(0.8);
}

.placeholder-caption {
  font-size: 13px;
  color: var(--color-text-weak);
  text-align: center;
  margin-top: 4px;
}

[data-theme="elegant"] #toast-container,
[data-theme="blue-dark"] #toast-container,
[data-theme="aurora"] #toast-container {
  background: hsl(var(--shadow-color) / 0.6);
  color: var(--color-text);
  border: 1px solid hsl(var(--shadow-color) / 0.4);
}

[data-theme="elegant"] #toast-container.success,
[data-theme="blue-dark"] #toast-container.success {
  background: var(--success-500);
  color: #fff;
}

.icon-footer {
  width: 24px;
  height: 24px;
  color: var(--color-text);
  transition: color 0.25s ease, transform 0.25s ease;
  cursor: pointer;
}

.icon-footer:hover {
  color: var(--color-primary);
  transform: translateY(-2px);
}

/* adattamento automatico nei dark theme */
[data-theme="elegant"] .icon-footer,
[data-theme="blue-dark"] .icon-footer {
  color: var(--color-text);
}
[data-theme="elegant"] .icon-footer:hover {
  color: var(--color-primary);
}
[data-theme="blue-dark"] .icon-footer:hover {
  color: var(--color-accent);
}
[data-theme="aurora"] .icon-footer:hover {
  color: var(--color-accent);
}

.menu-filter-sheet .filter-content {
  padding: 0;
}

/* pulsanti coerenti con i temi */
.action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 15px;
  transition: background .2s ease, color .2s ease, border .2s ease;
}

.action-button.primary {
  background: var(--color-primary);
  color: var(--color-primary-ink);
  border: 1px solid var(--color-primary);
}
.action-button.primary:hover {
  filter: brightness(1.05);
}

.action-button.secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}
.action-button.secondary:hover {
  background: color-mix(in oklab, var(--color-surface), var(--color-primary) 10%);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Adattamento dark themes */
[data-theme="elegant"] .action-button.secondary,
[data-theme="blue-dark"] .action-button.secondary,
[data-theme="aurora"] .action-button.secondary {
  background: var(--color-elev);
  color: var(--color-text);
  border: 1px solid hsl(var(--shadow-color) / .5);
}
[data-theme="elegant"] .action-button.secondary:hover,
[data-theme="blue-dark"] .action-button.secondary:hover,
[data-theme="aurora"] .action-button.secondary:hover {
  background: var(--color-primary);
  color: var(--color-primary-ink);
  border-color: var(--color-primary);
}