/**
 * Preset tema storefront luxury — valori solo qui, mai duplicati nei CSS strutturali.
 *
 * Preset attivo default: `luxury-brown` (marrone / oro).
 * Scope: `.webapp[data-wa-theme="…"]` così domani altri preset = solo nuovo blocco variabili.
 *
 * Fogli strutturali: webapp-catalog-luxury.css, webapp-categories-luxury.css, webapp-product-luxury.css
 * (layout, griglie, componenti) — usano var(--wa-lx-*).
 *
 * `webapp.css` legge --wa-bottom-nav-* su `.webapp`: qui le riallineiamo al preset.
 */

.webapp[data-wa-theme="luxury-brown"],
.webapp:not([data-wa-theme]) {
  /* ── Superfici ── */
  --wa-lx-bg: #151311;
  --wa-lx-bg-soft: #1a1816;
  --wa-lx-surface: #1f1c19;
  --wa-lx-surface-2: #262320;
  --wa-lx-surface-elev: #2f2b27;
  --wa-lx-surface-dark: #0d0c0b;
  --wa-lx-card: #1f1c19;
  --wa-lx-overlay-badge: rgba(21, 19, 17, 0.82);

  /* Riempimenti hero / gallery / strisce */
  --wa-lx-hero-grad-from: #2c2824;
  --wa-lx-gallery-mid: #252220;
  --wa-lx-variant-strip-from: rgba(30, 27, 24, 0.95);

  /* ── Testo ── */
  --wa-lx-text: #f6f1ea;
  --wa-lx-text-form: #f3efe9;
  --wa-lx-text-on-dark: #ffffff;
  --wa-lx-muted: rgba(255, 255, 255, 0.62);
  --wa-lx-muted-72: rgba(255, 255, 255, 0.72);
  --wa-lx-muted-78: rgba(255, 255, 255, 0.78);
  --wa-lx-muted-50: rgba(255, 255, 255, 0.5);
  --wa-lx-muted-55: rgba(255, 255, 255, 0.55);
  --wa-lx-muted-45: rgba(255, 255, 255, 0.45);
  --wa-lx-muted-40: rgba(255, 255, 255, 0.4);
  --wa-lx-muted-65: rgba(255, 255, 255, 0.65);
  --wa-lx-muted-88: rgba(255, 255, 255, 0.88);
  --wa-lx-muted-82: rgba(255, 255, 255, 0.82);
  --wa-lx-muted-85: rgba(255, 255, 255, 0.85);
  --wa-lx-muted-92: rgba(255, 255, 255, 0.92);
  --wa-lx-muted-35: rgba(255, 255, 255, 0.35);
  --wa-lx-page-tint: rgba(255, 255, 255, 0.9);
  --wa-lx-link-warm: #fff6dd;
  --wa-lx-divider-faint: rgba(255, 255, 255, 0.06);
  --wa-lx-divider-hairline: rgba(255, 255, 255, 0.05);

  /* ── Oro / accento ── */
  --wa-lx-gold: #d4b896;
  --wa-lx-gold-deep: #b8945f;
  --wa-lx-gold-soft: rgba(212, 184, 150, 0.75);
  --wa-lx-gold-eyebrow: rgba(212, 184, 150, 0.85);
  --wa-lx-gold-focus: rgba(212, 184, 150, 0.35);
  --wa-lx-gold-press: rgba(212, 184, 150, 0.12);
  --wa-lx-gold-highlight: rgba(212, 184, 150, 0.14);

  /* ── Bordi ── */
  --wa-lx-border: rgba(212, 184, 150, 0.22);
  --wa-lx-border-strong: rgba(212, 184, 150, 0.25);
  --wa-lx-border-soft: rgba(212, 184, 150, 0.15);
  --wa-lx-border-mid: rgba(212, 184, 150, 0.18);
  --wa-lx-border-pill: rgba(212, 184, 150, 0.28);
  --wa-lx-border-faint: rgba(212, 184, 150, 0.12);
  --wa-lx-border-2: rgba(212, 184, 150, 0.2);
  --wa-lx-border-wish: rgba(212, 184, 150, 0.35);
  --wa-lx-border-icon: rgba(212, 184, 150, 0.35);
  --wa-lx-border-toolbar: rgba(212, 184, 150, 0.2);
  --wa-lx-border-hover: rgba(212, 184, 150, 0.38);

  /* ── CTA ── */
  --wa-lx-cta-bg-start: #f0e4c8;
  --wa-lx-cta-bg-end: #b8945f;
  --wa-lx-cta-gradient: linear-gradient(145deg, var(--wa-lx-cta-bg-start), var(--wa-lx-cta-bg-end));
  --wa-lx-cta-text: #1a1816;
  --wa-lx-cta-hover-overlay: rgba(0, 0, 0, 0.12);

  /* ── Controlli interattivi (preset: stati leggibili per futuri temi) ── */
  --wa-lx-control-bg: #252220;
  --wa-lx-control-text: #f6f1ea;
  --wa-lx-control-border: rgba(212, 184, 150, 0.32);
  --wa-lx-control-hover-bg: #2f2b27;
  --wa-lx-control-hover-text: #ffffff;
  --wa-lx-control-active-bg: #2a2622;
  --wa-lx-control-active-text: #f6f1ea;
  --wa-lx-control-disabled-bg: #1c1a18;
  --wa-lx-control-disabled-text: rgba(246, 241, 234, 0.58);
  --wa-lx-control-disabled-border: rgba(212, 184, 150, 0.16);

  /* Paginazione: mai testo chiaro su oro chiaro; disabled sempre comprensibile */
  --wa-lx-pagination-bg: #252220;
  --wa-lx-pagination-text: #f6f1ea;
  --wa-lx-pagination-border: rgba(212, 184, 150, 0.36);
  --wa-lx-pagination-hover-bg: #32302c;
  --wa-lx-pagination-hover-text: #ffffff;
  --wa-lx-pagination-hover-border: rgba(212, 184, 150, 0.48);
  --wa-lx-pagination-active-bg: #d8c9a8;
  --wa-lx-pagination-active-text: #100e0c;
  --wa-lx-pagination-active-border: rgba(16, 14, 12, 0.22);
  --wa-lx-pagination-disabled-bg: #1e1c1a;
  --wa-lx-pagination-disabled-text: rgba(246, 241, 234, 0.64);
  --wa-lx-pagination-disabled-border: rgba(212, 184, 150, 0.22);
  --wa-lx-pagination-focus-ring: 0 0 0 3px rgba(212, 184, 150, 0.45);
  --wa-lx-pagination-meta: rgba(246, 241, 234, 0.78);

  /* Placeholder / hint form: sopra soglia di lettura su fondo scuro */
  --wa-lx-placeholder: rgba(246, 241, 234, 0.52);

  /* Stepper quantità storefront (− valore +) */
  --wa-lx-qty-bg: #252220;
  --wa-lx-qty-border: rgba(212, 184, 150, 0.38);
  --wa-lx-qty-text: #f6f1ea;
  --wa-lx-qty-value-bg: #1a1816;
  --wa-lx-qty-btn-bg: #2f2b27;
  --wa-lx-qty-btn-text: #f6f1ea;
  --wa-lx-qty-btn-hover-bg: #3a3530;
  --wa-lx-qty-btn-hover-text: #ffffff;
  --wa-lx-qty-btn-active-bg: #443e38;
  --wa-lx-qty-disabled-bg: #1c1a18;
  --wa-lx-qty-disabled-text: rgba(246, 241, 234, 0.45);
  --wa-lx-qty-focus-ring: 0 0 0 3px rgba(212, 184, 150, 0.45);

  /* Stati semantici (placeholder per UI futura) */
  --wa-lx-danger: #c45c5c;
  --wa-lx-success: #6a9b7a;

  /* ── Radius ── */
  --wa-lx-radius-sm: 12px;
  --wa-lx-radius-md: 16px;
  --wa-lx-radius-lg: 22px;
  --wa-lx-radius-xs: 10px;
  --wa-lx-radius-pill: 14px;
  --wa-lx-radius-xl: 18px;

  /* ── Ombre neutre (i preset possono cambiare alpha) ── */
  --wa-lx-shadow-soft: 0 12px 32px rgba(0, 0, 0, 0.28);
  --wa-lx-shadow-card: 0 14px 36px rgba(0, 0, 0, 0.35);
  --wa-lx-shadow-strong: 0 20px 48px rgba(0, 0, 0, 0.45);
  --wa-lx-shadow-strip: 0 8px 22px rgba(0, 0, 0, 0.35);
  --wa-lx-shadow-hero-photo: 0 10px 28px rgba(0, 0, 0, 0.35);
  --wa-lx-shadow-gallery: 0 16px 42px rgba(0, 0, 0, 0.35);
  --wa-lx-shadow-aside: 0 10px 28px rgba(0, 0, 0, 0.28);

  /* Bridge: bottom nav in webapp.css */
  --wa-bottom-nav-bg: var(--wa-lx-bg-soft);
  --wa-bottom-nav-gold: var(--wa-lx-gold);
  --wa-bottom-nav-gold-deep: var(--wa-lx-gold-deep);

  /* Bridge: variabili legacy in webapp.css (:root) → stesso preset (no duplicazione hex fuori token) */
  --wa-bg: var(--wa-lx-bg);
  --wa-card: var(--wa-lx-surface);
  --wa-card-hover: var(--wa-lx-surface-2);
  --wa-border: var(--wa-lx-border);
  --wa-footer-bg: var(--wa-lx-bg-soft);
  --wa-footer-text: var(--wa-lx-muted-72);
  --wa-nav: var(--wa-lx-bg-soft);
  --wa-nav-text: var(--wa-lx-muted-85);
  --wa-nav-hover: var(--wa-lx-text-on-dark);
  --wa-shadow: var(--wa-lx-shadow-soft);
  --wa-shadow-hover: var(--wa-lx-shadow-card);
  --wa-primary: var(--wa-lx-gold-deep);
  --wa-primary-hover: var(--wa-lx-gold);
  --wa-gold: var(--wa-lx-gold);
  --wa-gold-light: var(--wa-lx-gold);
}

/* Bottom nav: bordo e testo icone allineati al preset (webapp.css carica prima). */
@media (max-width: 991.98px) {
  .webapp[data-wa-theme="luxury-brown"] .wa-mobile-bottom-nav,
  .webapp:not([data-wa-theme]) .wa-mobile-bottom-nav {
    border-top-color: var(--wa-lx-border);
  }

  .webapp[data-wa-theme="luxury-brown"] .wa-mobile-bottom-nav__item,
  .webapp:not([data-wa-theme]) .wa-mobile-bottom-nav__item {
    color: var(--wa-lx-muted-72);
  }
}