/*
Storefront design themes for the online ordering page.
Only visual variables and surface styling live here; no layout or business logic.
*/

body[data-design-theme] {
  --theme-accent: var(--red);
  --theme-accent-dark: var(--red-dark);
  --theme-accent-soft: rgba(215, 25, 32, .12);
  --theme-bg: var(--bg);
  --theme-paper: var(--paper);
  --theme-ink: var(--ink);
  --theme-muted: var(--muted);
  background: var(--theme-bg) !important;
}

body[data-design-theme="rosso"] { --theme-accent:#d71920; --theme-accent-dark:#9f1017; --theme-accent-soft:rgba(215,25,32,.14); --theme-bg:#f5f6f8; --theme-paper:#fff; --theme-ink:#1f2026; --theme-muted:#6b7280; }
body[data-design-theme="pomodoro"] { --theme-accent:#e63946; --theme-accent-dark:#b91c1c; --theme-accent-soft:rgba(230,57,70,.14); --theme-bg:#fff6ef; --theme-paper:#fffdfb; --theme-ink:#241411; --theme-muted:#7a5f55; }
body[data-design-theme="basilico"] { --theme-accent:#1f9d55; --theme-accent-dark:#166534; --theme-accent-soft:rgba(31,157,85,.14); --theme-bg:#f2fbf5; --theme-paper:#fff; --theme-ink:#102016; --theme-muted:#5f7165; }
body[data-design-theme="notte"] { --theme-accent:#f97316; --theme-accent-dark:#c2410c; --theme-accent-soft:rgba(249,115,22,.18); --theme-bg:#0f0d0b; --theme-paper:#181614; --theme-ink:#fff7ed; --theme-muted:#d6c8bc; }
body[data-design-theme="limone"] { --theme-accent:#ca8a04; --theme-accent-dark:#854d0e; --theme-accent-soft:rgba(202,138,4,.16); --theme-bg:#fffbe8; --theme-paper:#fffef7; --theme-ink:#26200d; --theme-muted:#776b42; }
body[data-design-theme="mare"] { --theme-accent:#0284c7; --theme-accent-dark:#075985; --theme-accent-soft:rgba(2,132,199,.14); --theme-bg:#f0f9ff; --theme-paper:#fff; --theme-ink:#0f2230; --theme-muted:#607889; }
body[data-design-theme="tartufo"] { --theme-accent:#b45309; --theme-accent-dark:#78350f; --theme-accent-soft:rgba(180,83,9,.16); --theme-bg:#f3eee7; --theme-paper:#fdfaf6; --theme-ink:#261b13; --theme-muted:#74665a; }
body[data-design-theme="vino"] { --theme-accent:#881337; --theme-accent-dark:#4c0519; --theme-accent-soft:rgba(136,19,55,.14); --theme-bg:#fff1f2; --theme-paper:#fffafa; --theme-ink:#241018; --theme-muted:#755763; }
body[data-design-theme="oliva"] { --theme-accent:#4d7c0f; --theme-accent-dark:#365314; --theme-accent-soft:rgba(77,124,15,.15); --theme-bg:#f7fee7; --theme-paper:#fff; --theme-ink:#1b2310; --theme-muted:#647055; }
body[data-design-theme="carbonara"] { --theme-accent:#c2410c; --theme-accent-dark:#7c2d12; --theme-accent-soft:rgba(194,65,12,.14); --theme-bg:#fef3c7; --theme-paper:#fffaf0; --theme-ink:#2a190c; --theme-muted:#7f6744; }
body[data-design-theme="espresso"] { --theme-accent:#92400e; --theme-accent-dark:#451a03; --theme-accent-soft:rgba(146,64,14,.15); --theme-bg:#f5efe6; --theme-paper:#fffbeb; --theme-ink:#20130b; --theme-muted:#735f4e; }
body[data-design-theme="menta"] { --theme-accent:#0f766e; --theme-accent-dark:#134e4a; --theme-accent-soft:rgba(15,118,110,.14); --theme-bg:#ecfeff; --theme-paper:#fff; --theme-ink:#102323; --theme-muted:#5d7475; }
body[data-design-theme="amore"] { --theme-accent:#db2777; --theme-accent-dark:#9d174d; --theme-accent-soft:rgba(219,39,119,.14); --theme-bg:#fdf2f8; --theme-paper:#fff; --theme-ink:#28111c; --theme-muted:#7d5f6d; }
body[data-design-theme="forno"] { --theme-accent:#b91c1c; --theme-accent-dark:#7f1d1d; --theme-accent-soft:rgba(185,28,28,.14); --theme-bg:#ffedd5; --theme-paper:#fff7ed; --theme-ink:#24130f; --theme-muted:#765f50; }
body[data-design-theme="milano"] { --theme-accent:#111827; --theme-accent-dark:#030712; --theme-accent-soft:rgba(17,24,39,.10); --theme-bg:#f3f4f6; --theme-paper:#fff; --theme-ink:#111827; --theme-muted:#6b7280; }
body[data-design-theme="napoli"] { --theme-accent:#ea580c; --theme-accent-dark:#9a3412; --theme-accent-soft:rgba(234,88,12,.14); --theme-bg:#fff7ed; --theme-paper:#fff; --theme-ink:#26150e; --theme-muted:#755d50; }
body[data-design-theme="sicilia"] { --theme-accent:#a16207; --theme-accent-dark:#713f12; --theme-accent-soft:rgba(161,98,7,.15); --theme-bg:#fef9c3; --theme-paper:#fffdf5; --theme-ink:#27200f; --theme-muted:#756a46; }
body[data-design-theme="roma"] { --theme-accent:#be123c; --theme-accent-dark:#881337; --theme-accent-soft:rgba(190,18,60,.14); --theme-bg:#f8fafc; --theme-paper:#fff; --theme-ink:#1f2026; --theme-muted:#64748b; }
body[data-design-theme="lago"] { --theme-accent:#2563eb; --theme-accent-dark:#1e40af; --theme-accent-soft:rgba(37,99,235,.14); --theme-bg:#eff6ff; --theme-paper:#fff; --theme-ink:#111827; --theme-muted:#607088; }
body[data-design-theme="peperoncino"] { --theme-accent:#dc2626; --theme-accent-dark:#991b1b; --theme-accent-soft:rgba(220,38,38,.16); --theme-bg:#fee2e2; --theme-paper:#fff7f7; --theme-ink:#261111; --theme-muted:#755454; }

body[data-design-theme] {
  --red: var(--theme-accent) !important;
  --red-dark: var(--theme-accent-dark) !important;
  --paper: var(--theme-paper) !important;
  --bg: var(--theme-bg) !important;
  --ink: var(--theme-ink) !important;
  --muted: var(--theme-muted) !important;
}

body[data-design-theme]:not(.admin-login):not(.install-page):not(.screen-page):not(.status-page):not(.legal-page) .menu-panel {
  background: var(--theme-bg) !important;
}

body[data-design-theme]:not(.admin-login):not(.install-page):not(.screen-page):not(.status-page):not(.legal-page) .restaurant-overview,
body[data-design-theme]:not(.admin-login):not(.install-page):not(.screen-page):not(.status-page):not(.legal-page) .product-card,
body[data-design-theme]:not(.admin-login):not(.install-page):not(.screen-page):not(.status-page):not(.legal-page) .cart-panel,
body[data-design-theme]:not(.admin-login):not(.install-page):not(.screen-page):not(.status-page):not(.legal-page) .area-card {
  background: var(--theme-paper) !important;
  color: var(--theme-ink) !important;
}

body[data-design-theme]:not(.admin-login):not(.install-page):not(.screen-page):not(.status-page):not(.legal-page) .delivery-summary {
  border-color: color-mix(in srgb, var(--theme-accent) 20%, #fff) !important;
  background: color-mix(in srgb, var(--theme-accent) 7%, var(--theme-paper)) !important;
}

body[data-design-theme]:not(.admin-login):not(.install-page):not(.screen-page):not(.status-page):not(.legal-page) [data-product-open],
body[data-design-theme]:not(.admin-login):not(.install-page):not(.screen-page):not(.status-page):not(.legal-page) .btn.primary,
body[data-design-theme]:not(.admin-login):not(.install-page):not(.screen-page):not(.status-page):not(.legal-page) .variant-pills button.active,
body[data-design-theme]:not(.admin-login):not(.install-page):not(.screen-page):not(.status-page):not(.legal-page) .mobile-cart-bar {
  background: var(--theme-accent) !important;
  border-color: var(--theme-accent) !important;
  box-shadow: 0 14px 32px var(--theme-accent-soft) !important;
}

body[data-design-theme]:not(.admin-login):not(.install-page):not(.screen-page):not(.status-page):not(.legal-page) .category-nav-shell .category-nav a.active,
body[data-design-theme]:not(.admin-login):not(.install-page):not(.screen-page):not(.status-page):not(.legal-page) .language-switcher a.active {
  color: #fff !important;
  background: var(--theme-accent) !important;
  border-color: var(--theme-accent) !important;
}

body[data-design-theme="notte"]:not(.admin-login):not(.install-page):not(.screen-page):not(.status-page):not(.legal-page) .product-card p,
body[data-design-theme="notte"]:not(.admin-login):not(.install-page):not(.screen-page):not(.status-page):not(.legal-page) .restaurant-overview p,
body[data-design-theme="notte"]:not(.admin-login):not(.install-page):not(.screen-page):not(.status-page):not(.legal-page) .cart-row span,
body[data-design-theme="notte"]:not(.admin-login):not(.install-page):not(.screen-page):not(.status-page):not(.legal-page) .muted {
  color: var(--theme-muted) !important;
}

.design-theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.design-theme-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1.5px solid var(--line);
  border-radius: 16px;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.design-theme-card:hover,
.design-theme-card.is-selected {
  border-color: var(--theme-accent);
  box-shadow: 0 12px 28px rgba(17, 24, 39, .08);
  transform: translateY(-1px);
}

.design-theme-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.design-theme-card strong {
  color: #17181d;
}

.design-theme-card em {
  color: #6b7280;
  font-style: normal;
  font-size: 12px;
}

.design-theme-preview {
  display: grid;
  grid-template-columns: 1fr 42px;
  gap: 8px;
  height: 86px;
  padding: 10px;
  border-radius: 14px;
  background: var(--theme-bg);
  overflow: hidden;
}

.design-theme-preview span:first-child {
  grid-row: 1 / span 2;
  border-radius: 12px;
  background: var(--theme-paper);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}

.design-theme-preview span:nth-child(2) {
  border-radius: 999px;
  background: var(--theme-accent);
}

.design-theme-preview span:nth-child(3) {
  border-radius: 12px;
  background: color-mix(in srgb, var(--theme-accent) 16%, var(--theme-paper));
}