/* ═══════════════════════════════════════════════════════════════════════════
   آتی شاپ — DUAL-THEME DESIGN TOKENS  (loaded AFTER luxury.css)
   Light Editorial Luxe (default) + warm Obsidian dark.
   Strategy: re-map the existing luxury.css variables per theme so the whole
   site re-themes, and expose new --am-* semantic tokens for redesigned pages.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ---- LIGHT (default) ---- */
:root,
html[data-theme="light"] {
  /* new semantic tokens */
  --am-bg:        #FBF6F0;
  --am-surf:      #FFFFFF;
  --am-surf2:     #F4EBE2;
  --am-text:      #2A1E1B;
  --am-muted:     #6E5D52;
  --am-line:      #E7DBCD;
  --am-blush:     #E7AEB4;
  --am-rose:      #A8475C;
  --am-gold:      #A7843F;
  --am-btnfg:     #FFFFFF;
  --am-panel:     #2A1E1B;
  --am-panelfg:   #FBF6F0;
  --am-hero1:     #F7E5E2;
  --am-hero2:     #F1E7DA;
  --am-star:      #B58A3C;
  --am-shadow:    0 18px 50px -28px rgba(80,40,30,.45);
  --am-radius:    16px;

  /* re-map legacy luxury tokens to the LIGHT palette so existing
     components (which reference these) flip automatically */
  --obsidian:      #FBF6F0;
  --ink:           #FBF6F0;
  --charcoal:      #FFFFFF;
  --graphite:      #F4EBE2;
  --rose-gold:     #A8475C;
  --rose-gold-2:   #8E3B4D;
  --champagne:     #2A1E1B;
  --champagne-dim: #6E5D52;
  --liquid-gold:   #A7843F;
  --liquid-gold-2: #8C6E33;
  --pearl:         rgba(42,30,27,0.04);
  --pearl-glow:    rgba(42,30,27,0.08);
  --blush:         #E7AEB4;
  --merlot:        #A8475C;
  --midnight:      rgba(251,246,240,0.9);
  --glass-luxury:  rgba(255,255,255,0.78);
  --border-luxury: #E7DBCD;
  --border-gold:   rgba(167,132,63,0.3);
}

/* ---- DARK (warm obsidian) ---- */
html[data-theme="dark"] {
  --am-bg:        #110C0E;
  --am-surf:      #1A1318;
  --am-surf2:     #231A20;
  --am-text:      #F4EAD8;
  --am-muted:     #C2B19B;
  --am-line:      rgba(212,175,55,.16);
  --am-blush:     #E0A6A0;
  --am-rose:      #E2A79F;
  --am-gold:      #E4C277;
  --am-btnfg:     #14100F;
  --am-panel:     #241620;
  --am-panelfg:   #F4EAD8;
  --am-hero1:     #2A1922;
  --am-hero2:     #1C151A;
  --am-star:      #E4C277;
  --am-shadow:    0 22px 60px -30px rgba(0,0,0,.7);
  --am-radius:    16px;

  --obsidian:      #110C0E;
  --ink:           #160F13;
  --charcoal:      #1A1318;
  --graphite:      #231A20;
  --rose-gold:     #D8A679;
  --rose-gold-2:   #C08A5E;
  --champagne:     #F4EAD8;
  --champagne-dim: #C2B19B;
  --liquid-gold:   #E4C277;
  --liquid-gold-2: #C9A24E;
  --pearl:         rgba(247,231,206,0.06);
  --pearl-glow:    rgba(247,231,206,0.12);
  --blush:         #E0A6A0;
  --merlot:        #7A2A45;
  --midnight:      rgba(17,12,14,0.92);
  --glass-luxury:  rgba(26,19,24,0.75);
  --border-luxury: rgba(212,175,55,0.16);
  --border-gold:   rgba(212,175,55,0.3);
}

/* ---- Persian-first typography (use the bundled Vazirmatn site-wide) ---- */
body, .hero-luxury, button, input, select, textarea {
  font-family: 'Vazirmatn', 'Inter', system-ui, -apple-system, sans-serif;
}
.am-display { font-family: 'Vazirmatn', 'Inter', sans-serif; font-weight: 800; letter-spacing: -.01em; line-height: 1.22; }
.am-lat { font-family: 'Playfair Display', Georgia, serif; }

/* ---- Content must NEVER wait for JavaScript ----
   .scroll-animate elements are hidden (opacity:0) by animations.css/app.css
   until scroll-animations.js reveals them. On slow/cold connections that JS
   arrives seconds late — the whole page (products!) looked empty. Until the
   script loads and stamps html.anim-ready, force everything visible; the
   script reveals in-viewport elements synchronously before opting in, so
   there is no flash. No JS (or JS failure) = fully visible page. */
html:not(.anim-ready) .scroll-animate {
  opacity: 1 !important;
  transform: none !important;
}

/* همان قاعده برای تصاویر: ux-pro.css و revolution.css هر img[loading="lazy"] را
   با opacity:0 (و blur) شروع می‌کنند و فقط اسکریپت inline داخل App.razor آن را
   برمی‌گرداند. اگر آن اسکریپت اجرا نشود — سرورِ تازه‌ریسایکل‌شده، شبکه‌ی کند،
   خطای JS — کل تصاویر سایت برای همیشه نامرئی می‌ماندند. تا وقتی اسکریپت
   html.lz-ready را نزده، تصاویر کاملاً مرئی‌اند: بدون JS = صفحه‌ی سالم. */
html:not(.lz-ready) img[loading="lazy"] {
  opacity: 1 !important;
  filter: none !important;
}

/* ux-pro.css paints bare p/.text-muted pale lavender for the ORIGINAL dark
   theme — unreadable on the light theme (e.g. spin-wheel subtitle). Same
   selectors, later in the cascade, token-driven so both themes resolve. */
p, .text-muted, .product-price-old, .stat-label {
  color: var(--am-muted);
}

/* ---- Base surfaces driven by tokens (beats luxury.css !important) ---- */
html[data-theme="light"] body,
html:not([data-theme]) body {
  background-color: var(--am-bg) !important;
  color: var(--am-text) !important;
}
html[data-theme="dark"] body {
  background-color: var(--am-bg) !important;
  color: var(--am-text) !important;
}

/* The dark-only grain/scanline decorations from luxury.css are too heavy
   on a light page — suppress them in light mode. */
html[data-theme="light"] body::after,
html:not([data-theme]) body::after { opacity: 0 !important; }

/* Smooth theme transition */
html.am-theme-ready body,
html.am-theme-ready body * {
  transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}

/* ---- Global cohesion layer ----
   Re-map the widely-used legacy gradient / accent / dark vars to the token
   palette so non-redesigned pages (shop, PDP, cart, account) stay coherent in
   both themes. These reference --am-* so they auto-resolve per theme. */
:root {
  --primary:        var(--am-rose);
  --primary-pink:   var(--am-rose);
  --secondary:      var(--am-gold);
  --accent:         var(--am-gold);
  --dark-primary:   var(--am-bg);
  --dark-secondary: var(--am-surf2);
  --dark-tertiary:  var(--am-surf);
  --gradient-glamour: linear-gradient(120deg, var(--am-rose), var(--am-gold));
  --gradient-royal:   linear-gradient(120deg, var(--am-rose), var(--am-gold));
  --gradient-aurora:  linear-gradient(120deg, var(--am-rose), var(--am-gold));
}

/* Generic primary/secondary buttons used across legacy pages */
.btn-primary {
  background: var(--am-rose) !important;
  color: var(--am-btnfg) !important;
  border: 1px solid var(--am-rose) !important;
}
.btn-primary:hover { box-shadow: var(--am-shadow); }
.btn-outline, .btn-secondary {
  background: transparent !important;
  color: var(--am-text) !important;
  border: 1px solid var(--am-line) !important;
}
.btn-outline:hover, .btn-secondary:hover { border-color: var(--am-rose) !important; color: var(--am-rose) !important; }

/* Links, selection, focus */
a { color: var(--am-rose); }
::selection { background: var(--am-blush); color: var(--am-text); }
:focus-visible { outline: 2px solid var(--am-gold); outline-offset: 2px; }

/* Luxury scrollbar adapts to theme */
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--am-rose), var(--am-gold)) !important; }
::-webkit-scrollbar-track { background: var(--am-surf2) !important; }

/* ---- Navbar (theme-aware; overrides legacy dark glass) ----
   High-specificity selectors so they beat app.css / button-fix.css. */
nav.navbar, nav.navbar.scrolled, html .navbar {
  background: var(--am-surf) !important;
  border-bottom: 1px solid var(--am-line) !important;
  backdrop-filter: blur(14px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
  box-shadow: 0 1px 12px rgba(0,0,0,0.04) !important;
}
.navbar .navbar-menu .navbar-item a, .navbar .navbar-item > a, .navbar-menu a { color: var(--am-text) !important; text-shadow: none !important; }
.navbar .navbar-item a:hover, .navbar .navbar-menu a:hover { color: var(--am-rose) !important; }
.navbar .navbar-brand, .navbar .navbar-brand span, .navbar .site-logo {
  color: var(--am-text) !important;
  background: none !important;
  -webkit-text-fill-color: var(--am-text) !important;
}
.navbar .icon-button, .navbar-icons .icon-button { color: var(--am-text) !important; background: transparent !important; }
.navbar .icon-button:hover, .navbar-icons .icon-button:hover { color: var(--am-rose) !important; }

/* submenu dropdown — was rendering in-flow (no positioning existed anywhere),
   which inflated the navbar height. Make it a proper hover dropdown. */
.navbar-item.has-submenu { position: relative; }
.navbar-item .submenu {
  position: absolute !important;
  top: 100%;
  inset-inline-start: 0;
  min-width: 200px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: var(--am-surf) !important;
  border: 1px solid var(--am-line) !important;
  border-radius: 12px !important;
  box-shadow: var(--am-shadow) !important;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 1001;
}
.navbar-item.has-submenu:hover > .submenu,
.navbar-item.has-submenu:focus-within > .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.submenu-item { list-style: none; }
.submenu-item > a {
  display: block;
  padding: 9px 18px !important;
  color: var(--am-text) !important;
  white-space: nowrap;
}
.submenu-item > a:hover { color: var(--am-rose) !important; background: var(--am-surf2) !important; }

/* login button — replace neon gradient (match button-fix.css specificity) */
.navbar-icons .btn-login, .navbar-icons a.btn-login, a.btn-login, .btn-login {
  background: var(--am-rose) !important;
  color: var(--am-btnfg) !important;
  border: 1px solid var(--am-rose) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.navbar-icons .btn-login span, .navbar-icons a.btn-login span, a.btn-login span,
.navbar-icons .btn-login i, .navbar-icons a.btn-login i, a.btn-login i { color: var(--am-btnfg) !important; }
.navbar-icons a.btn-login:hover, a.btn-login:hover { background: var(--am-rose) !important; box-shadow: var(--am-shadow) !important; }

/* cart/wishlist/comparison count badge */
.cart-badge { background: var(--am-rose) !important; color: var(--am-btnfg) !important; box-shadow: none !important; }

/* ---- Theme toggle button (navbar) ---- */
.am-theme-toggle {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: transparent; border: 1px solid var(--am-line);
  color: var(--am-text); cursor: pointer;
  transition: border-color .25s ease, color .25s ease, background .25s ease;
}
.am-theme-toggle:hover { border-color: var(--am-rose); color: var(--am-rose); }
.am-theme-toggle .ti, .am-theme-toggle i { font-size: 18px; }