/* ═══════════════════════════════════════════════════════════════
   ALPHASTACK™ — GLOBAL THEME SYSTEM v1
   Dark (default) + Light theme via html[data-theme="light"]
   Loaded automatically by nav.js on every page.
   Pages consume tokens: --bg --bg-2 --text --text-soft --text-dim
   --line --line-strong --surface --panel --bg-deep --red --gold
   Legacy bridge: --dark --dark2 --white --offwhite remapped below.
═══════════════════════════════════════════════════════════════ */

/* ── DARK (default) — refined, contrast-fixed ── */
html {
  --bg:          #0b0a0e;
  --bg-2:        #14110f;
  --bg-deep:     #060509;
  --panel:       rgba(13,12,16,0.98);
  --surface:     rgba(255,255,255,0.04);
  --text:        #f4f1ea;
  --text-soft:   #d9d3c8;
  --text-dim:    rgba(235,230,220,0.62);
  --line:        rgba(255,255,255,0.10);
  --line-strong: rgba(255,255,255,0.18);
  --red:         #C8102E;
  --red-bright:  #e8162f;
  --red-dark:    #8B0A1F;
  --gold:        #c9a84c;
  --gold-soft:   rgba(201,168,76,0.55);
  --shadow-lg:   0 18px 52px rgba(0,0,0,0.45);
  --shadow-sm:   0 6px 20px rgba(0,0,0,0.30);
  color-scheme: dark;
}

/* ── LIGHT — "Gallery Ivory" luxury system ──
   Warm ivory walls, pure-white elevated surfaces, warm ink.
   No cold grays anywhere — warmth reads as expensive (Aesop),
   white-on-ivory elevation reads as Apple. ── */
html[data-theme="light"] {
  --bg:          #f6f3ec;  /* primary: warm ivory gallery wall */
  --bg-2:        #efeae0;  /* secondary: deeper warm */
  --bg-deep:     #e9e3d5;  /* alternate/anchor sections */
  --panel:       #ffffff;  /* elevated panels: pure white pops on ivory */
  --surface:     rgba(20,18,16,0.045);
  --text:        #141210;  /* warm near-black ink — 14:1 contrast */
  --text-soft:   #3f3a33;  /* secondary: warm dark gray — 8:1 */
  --text-dim:    #807767;  /* muted: warm taupe, never cold gray — 4.6:1 */
  --line:        rgba(20,18,16,0.09);
  --line-strong: rgba(20,18,16,0.18);
  --red:         #b5122d;  /* deepened brand red — 5.9:1 on white */
  --red-bright:  #d31230;  /* hover: brighter = response energy */
  --red-dark:    #8a0e22;  /* pressed/underline depth */
  --gold:        #8c701f;  /* text-safe gold — 4.8:1 */
  --gold-soft:   rgba(185,142,47,0.55);
  --verify:      #1e7a4a;  /* deep emerald — certified, bank-grade */
  --verify-bg:   #e9f4ec;  /* pale mint chip background */
  --shadow-lg:   0 24px 60px rgba(30,25,16,0.13), 0 4px 14px rgba(30,25,16,0.06);
  --shadow-sm:   0 10px 30px rgba(30,25,16,0.09), 0 2px 8px rgba(30,25,16,0.05);
  color-scheme: light;
}

/* ── LEGACY BRIDGE — every page already uses these names.
     !important beats page-level :root definitions. ── */
html, html[data-theme="light"] {
  --dark:     var(--bg)        !important;
  --dark2:    var(--bg-2)      !important;
  --white:    var(--text)      !important;
  --offwhite: var(--text-soft) !important;
}

/* ── SMOOTH THEME SWITCH ── */
@media (prefers-reduced-motion: no-preference) {
  body, #as-nav, #as-footer, #as-ticker, .as-nav-dropdown {
    transition: background-color .4s ease, color .4s ease, border-color .4s ease;
  }
}

/* ── THEME TOGGLE BUTTON (injected by nav.js) ── */
.as-theme-btn {
  position: relative; display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer !important;
  padding: 6px; color: var(--text-soft); opacity: 0.55;
  transition: opacity 0.25s, transform 0.25s;
}
.as-theme-btn:hover { opacity: 1 !important; transform: scale(1.1) rotate(12deg); }
.as-theme-btn svg { width: 19px; height: 19px; fill: currentColor; display: block; }
.as-theme-btn .as-icon-sun { display: none; }
.as-theme-btn .as-icon-moon { display: block; }
html[data-theme="light"] .as-theme-btn .as-icon-sun { display: block; }
html[data-theme="light"] .as-theme-btn .as-icon-moon { display: none; }
@media (max-width: 768px) { .as-theme-btn svg { width: 17px; height: 17px; } }

/* ── LIGHT-THEME OVERRIDES FOR INJECTED COMPONENTS ── */
html[data-theme="light"] body { background: var(--bg); color: var(--text); }

html[data-theme="light"] #as-nav {
  background: linear-gradient(180deg, rgba(247,245,240,0.97) 0%, transparent 100%);
}
html[data-theme="light"] .as-nav-logo,
html[data-theme="light"] .as-footer-logo { filter: brightness(0) opacity(0.82); }
html[data-theme="light"] .as-nav-social a { color: var(--text-soft); }
html[data-theme="light"] .as-nav-line { background: var(--text-soft); }
html[data-theme="light"] .as-cart-btn { color: var(--text-soft); }

html[data-theme="light"] .as-nav-dropdown {
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 2px solid var(--red);
  box-shadow: var(--shadow-lg);
}
html[data-theme="light"] .as-nav-dropdown a { color: var(--text-soft); }
html[data-theme="light"] .as-nav-dropdown a:hover { color: var(--text); background: rgba(22,18,12,0.04); }
html[data-theme="light"] .as-nav-dropdown-section { border-bottom: 1px solid var(--line); }

html[data-theme="light"] #as-ticker {
  background: var(--bg-deep);
  border-bottom: 1px solid var(--line);
}
html[data-theme="light"] .as-tick-item { color: var(--text-dim); }
html[data-theme="light"] .as-tick-item.highlight { color: var(--gold); }

html[data-theme="light"] #as-footer { background: var(--bg-deep) !important; border-top: 1px solid var(--line) !important; }
html[data-theme="light"] #as-footer::before { background: linear-gradient(to bottom, transparent, var(--bg-deep)); }
html[data-theme="light"] .as-footer-badge { color: var(--text-dim); border-color: var(--line-strong); }
html[data-theme="light"] .as-footer-legal a { color: var(--text-dim); }
html[data-theme="light"] .as-footer-legal a:hover { color: var(--text); }
html[data-theme="light"] .as-footer-legal span { color: var(--line-strong); }
html[data-theme="light"] .as-footer-copy { color: var(--text-dim); }

/* generic safety nets for not-yet-migrated pages */
html[data-theme="light"] input, html[data-theme="light"] textarea, html[data-theme="light"] select {
  color: var(--text);
}
html[data-theme="light"] input::placeholder, html[data-theme="light"] textarea::placeholder {
  color: var(--text-dim);
}

/* ═══════════════════════════════════════════════════════════════
   SHARED COMPONENTS v13 — extracted from index.html
   Any page can use these classes. index.html is the reference.
═══════════════════════════════════════════════════════════════ */

/* card material tokens */
html {
  --card:        rgba(255,255,255,0.028);
  --card-border: rgba(255,255,255,0.07);
  --card-hover:  rgba(255,255,255,0.05);
  --shadow-soft: 0 12px 40px rgba(0,0,0,0.30), 0 2px 8px rgba(0,0,0,0.20);
  --shadow-lift: 0 26px 64px rgba(0,0,0,0.40), 0 4px 12px rgba(0,0,0,0.25);
}
html[data-theme="light"] {
  --card:        #ffffff;
  --card-border: rgba(20,16,10,0.14);
  --card-hover:  #ffffff;
  --shadow-soft: 0 12px 40px rgba(30,25,16,0.09), 0 2px 8px rgba(30,25,16,0.05);
  --shadow-lift: 0 26px 64px rgba(30,25,16,0.14), 0 4px 12px rgba(30,25,16,0.06);
}

/* branded text selection + keyboard focus */
::selection { background: var(--red); color: #fff; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 2px; }

/* ── BUTTONS ── */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  padding: 18px 44px;
  font-family: 'Bebas Neue', sans-serif; font-size: 16px; letter-spacing: 0.32em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  overflow: hidden; border: none; background: none;
  transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease, background .25s ease, border-color .25s ease, color .25s ease, letter-spacing .3s ease;
}
.btn svg { width: 16px; height: 16px; flex-shrink: 0; transition: transform .3s cubic-bezier(.22,.61,.36,1); }
.btn:hover svg { transform: translateX(5px); }
.btn-red {
  background: linear-gradient(180deg, var(--red-bright, #e8162f) 0%, var(--red) 55%);
  color: #fff;
  box-shadow: 0 10px 32px rgba(200,16,46,0.28), inset 0 1px 0 rgba(255,255,255,0.25);
}
.btn-red::before {
  content: ''; position: absolute; top: 0; left: -80%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.28), transparent);
  transform: skewX(-18deg);
  transition: left .55s cubic-bezier(.22,.61,.36,1);
}
.btn-red:hover::before { left: 120%; }
.btn-red:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(200,16,46,0.42), inset 0 1px 0 rgba(255,255,255,0.3); letter-spacing: 0.36em; }
.btn-line {
  border: 1.5px solid var(--line-strong); color: var(--text);
  background: var(--surface);
  overflow: visible;
}
.btn-line::before, .btn-line::after {
  content: ''; position: absolute; width: 11px; height: 11px;
  border-color: var(--red); border-style: solid;
  opacity: 0.5; transition: all .3s cubic-bezier(.22,.61,.36,1);
}
.btn-line::before { top: -4px; left: -4px; border-width: 1.5px 0 0 1.5px; }
.btn-line::after { bottom: -4px; right: -4px; border-width: 0 1.5px 1.5px 0; }
.btn-line:hover::before, .btn-line:hover::after { opacity: 1; width: 15px; height: 15px; }
.btn-line:hover { border-color: var(--text-soft); transform: translateY(-3px); }
html[data-theme="light"] .btn { border-radius: 100px; }
@media (hover: none) {
  .btn:active { transform: scale(0.965); transition-duration: .12s; }
  .btn-line:active { background: rgba(200,16,46,0.08); border-color: var(--red); }
}

/* ── SECTION HEADERS ── */
.eyebrow {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.5em;
  color: var(--red); text-transform: uppercase;
  margin-bottom: 22px;
}
.eyebrow::before, .eyebrow::after { content: ''; width: 28px; height: 1px; background: var(--red); }
.eyebrow .num { color: var(--text-dim); letter-spacing: 0.2em; }
html[data-theme="light"] .eyebrow::before { background: linear-gradient(90deg, transparent, #b98e2f, #d9b65a); }
html[data-theme="light"] .eyebrow::after { background: linear-gradient(90deg, #d9b65a, #b98e2f, transparent); }
.display {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(44px, 6.5vw, 88px);
  letter-spacing: 0.06em; line-height: 0.94;
  color: var(--text); font-weight: 400;
}
.display .dim { color: var(--text); opacity: 0.3; }
html[data-theme="light"] .display { text-shadow: 0 1px 0 rgba(255,255,255,0.55); }
html[data-theme="light"] .display .dim { opacity: 0.36; }

/* ── REVEAL (observer lives in nav.js) ── */
.reveal {
  opacity: 0; transform: translateY(26px);
  filter: blur(7px);
  transition: opacity .9s cubic-bezier(.22,.61,.36,1), transform .9s cubic-bezier(.22,.61,.36,1), filter .9s ease;
}
.reveal.visible { opacity: 1; transform: none; filter: blur(0); }
.reveal.no-blur { filter: none; }
.rd1 { transition-delay: .1s; } .rd2 { transition-delay: .2s; } .rd3 { transition-delay: .3s; }
@media (prefers-reduced-motion: reduce) { .reveal { filter: none; transform: none; opacity: 1; } }
html.as-no-js .reveal { opacity: 1; transform: none; filter: none; }

/* ── GENERIC CARD ── */
.as-card {
  background: var(--card);
  border: 1px solid var(--card-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.055);
  transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, border-color .3s ease;
}
.as-card:hover { transform: translateY(-5px); border-color: rgba(200,16,46,0.35); box-shadow: var(--shadow-lift); }
html[data-theme="light"] .as-card {
  border: 1px solid rgba(26,23,19,0.06); border-radius: 14px;
  box-shadow: var(--shadow-soft);
}
@media (hover: none) { .as-card:active { transform: scale(0.985); } }

/* ── CHIPS ── */
.chip {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 10px 22px;
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--text-dim);
  cursor: pointer;
  transition: all .25s ease;
}
.chip:hover { border-color: var(--text-dim); color: var(--text); }
.chip.on { background: var(--red); border-color: var(--red); color: #fff; }
html[data-theme="light"] .chip {
  border-radius: 100px; background: #ffffff;
  border-color: rgba(20,18,16,0.14);
  box-shadow: 0 2px 8px rgba(30,25,16,0.05);
}
html[data-theme="light"] .chip.on { background: var(--red); border-color: var(--red); box-shadow: 0 6px 18px rgba(181,18,45,0.25); }
@media (hover: none) { .chip:active { transform: scale(0.94); } }