/* MONO. — ambient chrome: monochrome patterns + radial glows + footer + 404.
   No hue anywhere. Every fill is driven by --pat / --pat2 so the layer
   flips light↔dark automatically with the `.dark` class. Drop a class on
   any section, or pair with `.ambient-layer` for a full-bleed overlay. */

/* ── pattern fills ─────────────────────────────────────────────── */
.ambient-dots{
  background-image:radial-gradient(var(--pat2) 1px,transparent 1px);
  background-size:22px 22px;
}
.ambient-grid{
  background-image:linear-gradient(var(--pat) 1px,transparent 1px),
    linear-gradient(90deg,var(--pat) 1px,transparent 1px);
  background-size:34px 34px;
}
.ambient-diag{
  background-image:repeating-linear-gradient(45deg,var(--pat2) 0 1px,transparent 1px 14px);
}
.ambient-waves{
  background-image:radial-gradient(ellipse at 50% -40%,var(--pat2) 0 32%,transparent 52%);
  background-size:140px 96px;
}
.ambient-cross{
  background-image:linear-gradient(var(--pat2) 1.5px,transparent 1.5px),
    linear-gradient(90deg,var(--pat2) 1.5px,transparent 1.5px);
  background-size:22px 22px;
  background-position:center;
}
.ambient-grain{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* ── overlay helper (full-bleed, non-interactive) ──────────────── */
.ambient-layer{ position:absolute; inset:0; pointer-events:none; }

/* ── radial glows (tune via --gx / --gy / --gs inline) ─────────── */
.ambient-glow{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle var(--gs,620px) at var(--gx,50%) var(--gy,0%),var(--pat2),transparent 62%);
}
.ambient-glow-soft{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle var(--gs,880px) at var(--gx,50%) var(--gy,0%),var(--pat),transparent 60%);
}
/* near-white glow for near-black (bg-ink) bands — the band is always dark,
   so the glow is pinned to the theme-fixed ramp token --e6 (never redefined
   by .dark) rather than the flipping --ink/--bg pair */
.ambient-glow-on-ink{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle var(--gs,620px) at var(--gx,50%) var(--gy,0%),color-mix(in srgb, var(--e6) 8%, transparent),transparent 62%);
}

/* ── hollow outline word (true outline, both themes) ───────────── */
.ghost-word{
  color:transparent;
  -webkit-text-fill-color:transparent;
  -webkit-text-stroke:1px var(--ink);
}
@supports not (-webkit-text-stroke:1px black){
  .ghost-word{ color:var(--ink); -webkit-text-fill-color:var(--ink); -webkit-text-stroke:0; }
}
.ghost-word-thick{
  color:transparent;
  -webkit-text-fill-color:transparent;
  -webkit-text-stroke:2px var(--ink);
}
@supports not (-webkit-text-stroke:1px black){
  .ghost-word-thick{ color:var(--ink); -webkit-text-fill-color:var(--ink); -webkit-text-stroke:0; }
}

/* ── announcement bar (dark strip) — text must be ≥90% --bg for legibility ── */
.announce-bar{ position:relative; overflow:hidden; background:var(--ink); color:var(--bg); }
.announce-bar > div{ position:relative; z-index:1; color:var(--bg); opacity:.95; }
.announce-bar #announce{ color:var(--bg); opacity:1; }
.announce-bar::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* newsletter message stays legible on the dark newsletter band —
   --bg is the light end of the pair in BOTH themes on a bg-ink band */
.bg-ink .newsletter-msg{ color:color-mix(in srgb, var(--bg) 72%, transparent) }
.bg-ink .newsletter-msg.err{ color:var(--bg); font-weight:700 }
.bg-ink .newsletter-msg.ok{ color:color-mix(in srgb, var(--bg) 80%, transparent) }

/* ── footer (AAA mega-footer) ──────────────────────────────────── */
.footer-main{ position:relative; z-index:1; }

/* newsletter band — fixed near-black in both themes (matches the
   flash-sale precedent). The --e0…--e6 ramp is intentionally NOT redefined
   by .dark, so --e0 is always near-black and --e6 always near-white; alpha
   variants come from color-mix on the tokens, never raw rgba. */
.footer-news-band{ position:relative; overflow:hidden; background:var(--e0); color:var(--e6); }
.footer-news-band .nl-rule{ display:inline-block; width:2rem; height:1px; background:color-mix(in srgb, var(--e6) 40%, transparent); }
.footer-news-band input{
  background:color-mix(in srgb, var(--e6) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--e6) 32%, transparent);
  color:var(--e6);
}
.footer-news-band input::placeholder{ color:color-mix(in srgb, var(--e6) 68%, transparent); }
.footer-news-band input:focus{ border-color:var(--e6); }
.footer-news-note{ color:color-mix(in srgb, var(--e6) 74%, transparent); }
.footer-news-sub{ background:var(--e6); color:var(--e0); }

/* column head: micro-label with a leading tick */
.footer-head{
  display:flex; align-items:center; gap:.55rem;
  font-size:11px; font-weight:800; letter-spacing:.25em; text-transform:uppercase; color:var(--muted);
}
.footer-head::before{ content:""; width:14px; height:1px; background:var(--line); }

/* social icon chips */
.footer-social{ display:flex; gap:.5rem; }
.footer-social a{
  display:inline-grid; place-items:center; width:38px; height:38px; border-radius:9999px;
  border:1px solid var(--line); color:var(--muted);
  transition:color .2s var(--ease-utility), border-color .2s, background-color .2s;
}
.footer-social a:hover{ border-color:var(--ink); background:var(--ink); color:var(--bg); }

/* payment badge chips */
.footer-pay{
  display:inline-flex; align-items:center; height:24px; padding:0 .55rem;
  border:1px solid var(--line); border-radius:.375rem;
  font-size:10px; font-weight:800; letter-spacing:.14em; color:var(--muted);
}
/* footer muted text reads dim on the dark surface — lift to e5 in dark mode */
.dark footer .text-muted,
.dark .footer-head,
.dark .footer-pay{ color:var(--e5); }

/* ── 404 ───────────────────────────────────────────────────────── */
.notfound-card{
  position:relative; isolation:isolate;
  border:1px solid var(--line); border-radius:1.5rem; background:var(--surface);
  box-shadow:0 30px 80px -40px color-mix(in srgb, var(--e0) 25%, transparent);
}
.notfound-404{
  font-size:clamp(6.5rem, 22vw, 14rem); line-height:.8; letter-spacing:-.04em; font-weight:900;
}
/* body copy + quick links: muted in light, brighter in dark (both ≥ AA) */
.notfound-desc{ color:var(--muted); }
.dark .notfound-desc{ color:var(--e5); }
.notfound-link{ color:var(--e3); }
.dark .notfound-link{ color:var(--e5); }
.notfound-link:hover{ color:var(--ink); }