/* Appily Eightysix — contrast lock (must load last) */
/* Rule: light surfaces → dark ink; dark/saturated fills → white or mint text */

:root {
  --read-ink: #0B1C18;
  --read-ink-soft: #1E3A33;
  --read-muted: #345248;
  --read-teal: #0F766E;
  --read-on-dark: #F0FDFA;
  --read-on-dark-soft: #C5EBE0;
  --read-on-neon: #050508;
  --read-white: #FFFFFF;
}

/* ── Base page copy ── */
body.a86-store,
.page-wrap,
.page-main,
.ng-shell {
  color: var(--read-ink) !important;
}

h1, h2, h3, h4, h5, h6,
p, li, label, dt, dd, th, td,
.lead, .mini-copy, .sub, .hero-lede {
  color: inherit;
}

h1, h2, h3, h4 {
  color: var(--read-ink) !important;
}
h1 em, h2 em, h3 em,
.a86-section-title em {
  color: var(--read-teal) !important;
}

p, li, .lead, .mini-copy, .sub, .hero-lede,
.ng-vault-lede, .ng-loom-lede, .ng-market-lede, .ng-beacon-lede,
.ng-bag-lede, .ng-ledger-lede, .ng-signal-lede, .ng-desk-lede,
.ng-seal-lede, .ng-atlas-lede, .ng-aisle-lede, .a86-seal-lede {
  color: var(--read-muted) !important;
}

/* Plain links on light page chrome */
.page-main a:not([class]),
.ng-foot a:not([class]) {
  color: var(--read-teal) !important;
}

/* ── Primary / amber buttons (white on teal/amber) ── */
.ng-btn:not(.ng-btn--ghost),
a.ng-btn:not(.ng-btn--ghost),
button.ng-btn:not(.ng-btn--ghost),
.ng-btn--amber,
a.ng-btn--amber,
button.ng-btn--amber,
.a86-btn-shop,
.a86-btn-all,
.a86-btn-shop--pulse,
.a86-btn-all--glow,
.a86-seal-btn:not(.a86-seal-btn--ghost),
.a86-seal-btn--primary,
.ng-vault-btn--primary,
.ng-vault-btn--ink,
.ng-market-filter-toggle,
.ng-market-drawer-close,
.ng-loom-clear,
.ng-film-controls button,
.ng-foot-form .ng-btn,
.a86-ladder-rung-foot .ng-btn:not(.ng-btn--ghost),
.a86-ladder-rung-peg,
.ng-beacon-dot,
.a86-seal-step i,
.a86-seal-panel-wax,
.ng-stream-sale,
.ng-stream-sold,
.a86-discount,
.a86-shop-pagination .is-active,
.a86-pagination .is-active {
  color: var(--read-white) !important;
}

.ng-btn:not(.ng-btn--ghost):hover,
.ng-btn:not(.ng-btn--ghost):focus-visible,
.ng-btn--amber:hover,
.a86-seal-btn:not(.a86-seal-btn--ghost):hover,
.ng-vault-btn--primary:hover,
.ng-vault-btn--ink:hover,
.ng-market-filter-toggle:hover {
  color: var(--read-white) !important;
}

/* Ensure primary fills stay dark enough for white text */
.ng-btn:not(.ng-btn--ghost),
a.ng-btn:not(.ng-btn--ghost),
button.ng-btn:not(.ng-btn--ghost) {
  background: linear-gradient(135deg, #0D9488, #0F766E) !important;
}
.ng-btn--amber,
a.ng-btn--amber,
button.ng-btn--amber {
  background: linear-gradient(135deg, #F59E0B, #D97706) !important;
}

/* ── Ghost / pale buttons (dark on light) ── */
.ng-btn--ghost,
a.ng-btn--ghost,
button.ng-btn--ghost,
.a86-seal-btn--ghost,
.ng-vault-btn--ghost,
.orders-view-all {
  color: var(--read-ink) !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(11, 28, 24, 0.14);
}
.ng-btn--ghost:hover,
a.ng-btn--ghost:hover,
button.ng-btn--ghost:hover,
.a86-seal-btn--ghost:hover,
.ng-vault-btn--ghost:hover {
  color: var(--read-teal) !important;
  background: #F0FDFA !important;
}

/* ── Chrysalis navbar ── */
.ae-chrys-arm {
  background: rgba(8, 10, 14, 0.96) !important;
}
.ae-chrys-link,
.ae-chrys-tool:not(.ae-chrys-tool--bag),
.ae-chrys-link strong,
.ae-chrys-tool:not(.ae-chrys-tool--bag) strong {
  color: var(--read-white) !important;
}
.ae-chrys-link em,
.ae-chrys-tool:not(.ae-chrys-tool--bag) em {
  color: #9EFFF0 !important;
}
.ae-chrys-link:hover,
.ae-chrys-link:focus-visible,
.ae-chrys-link.is-active,
.ae-chrys-tool:not(.ae-chrys-tool--bag):hover,
.ae-chrys-tool:not(.ae-chrys-tool--bag):focus-visible,
.ae-chrys-link:hover strong,
.ae-chrys-link.is-active strong,
.ae-chrys-tool:not(.ae-chrys-tool--bag):hover strong {
  color: var(--read-white) !important;
}
.ae-chrys-link:hover em,
.ae-chrys-link.is-active em,
.ae-chrys-tool:not(.ae-chrys-tool--bag):hover em {
  color: #7CFFB2 !important;
}

.ae-chrys-tool--bag {
  background: linear-gradient(145deg, #7CFFB2, #2EF2FF) !important;
}
.ae-chrys-tool--bag,
.ae-chrys-tool--bag strong,
.ae-chrys-tool--bag em {
  color: var(--read-on-neon) !important;
}

.ae-chrys-core {
  background: linear-gradient(145deg, #7CFFB2, #2EF2FF) !important;
}
.ae-chrys-core,
.ae-chrys-core-mark,
.ae-chrys-core-hint {
  color: var(--read-on-neon) !important;
}
.ae-nav[data-open="true"] .ae-chrys-core {
  background: #F4F4F2 !important;
}
.ae-nav[data-open="true"] .ae-chrys-core-mark {
  color: var(--read-on-neon) !important;
}

.ae-chrys-seek {
  background: rgba(255, 255, 255, 0.1) !important;
}
.ae-chrys-seek input {
  color: var(--read-white) !important;
  background: transparent !important;
}
.ae-chrys-seek input::placeholder {
  color: #9EFFF0 !important;
  opacity: 1 !important;
}
.ae-chrys-seek button {
  color: var(--read-on-neon) !important;
  background: #2EF2FF !important;
}

/* Mega aisles */
.ae-aisles .a86-mega {
  background: rgba(8, 10, 14, 0.97) !important;
  color: var(--read-white) !important;
}
.ae-aisles .a86-mega-col h4,
.ae-aisles .a86-mega-col h4 a,
.ae-aisles .a86-mega-promo,
.ae-aisles .a86-mega-promo strong {
  color: var(--read-white) !important;
}
.ae-aisles .a86-mega-col a,
.ae-aisles .a86-mega-promo small {
  color: #9EFFF0 !important;
}
.ae-aisles .a86-mega-col a:hover,
.ae-aisles .a86-mega-promo span {
  color: #7CFFB2 !important;
}

/* ── Footer ── */
.ng-foot {
  color: var(--read-ink) !important;
}
.ng-foot-banner {
  background:
    radial-gradient(ellipse 70% 80% at 100% 0%, rgba(56, 189, 248, 0.18), transparent 55%),
    radial-gradient(ellipse 50% 60% at 0% 100%, rgba(13, 148, 136, 0.16), transparent 50%),
    #FFFFFF !important;
}
.ng-foot-banner-copy h2 {
  color: var(--read-ink) !important;
}
.ng-foot-banner-copy h2 em {
  color: var(--read-teal) !important;
}
.ng-foot-banner-copy p,
.ng-foot-banner-copy .ng-chip {
  color: var(--read-muted) !important;
}
.ng-foot-banner-copy .ng-chip {
  color: var(--read-teal) !important;
  background: rgba(13, 148, 136, 0.14) !important;
}
.ng-foot-form {
  background: #FFFFFF !important;
}
.ng-foot-form input {
  color: var(--read-ink) !important;
}
.ng-foot-form input::placeholder {
  color: #5a736c !important;
  opacity: 1 !important;
}
.ng-foot-form .ng-btn {
  color: var(--read-white) !important;
  background: linear-gradient(135deg, #0D9488, #0F766E) !important;
}

.ng-foot-brand {
  background: linear-gradient(160deg, #0B1C18, #134E4A) !important;
  color: var(--read-on-dark) !important;
}
.ng-foot-brand *,
.ng-foot-logo,
.ng-foot-logo strong,
.ng-foot-logo em,
.ng-foot-mark,
.ng-foot-brand > p,
.ng-foot-top {
  color: var(--read-on-dark) !important;
}
.ng-foot-logo em {
  color: var(--read-on-dark-soft) !important;
}
.ng-foot-top {
  border-color: rgba(255, 255, 255, 0.35) !important;
  background: rgba(255, 255, 255, 0.12) !important;
}
.ng-foot-top:hover {
  color: var(--read-white) !important;
  background: rgba(13, 148, 136, 0.55) !important;
}

.ng-foot-col h4 {
  color: var(--read-teal) !important;
}
.ng-foot-col a,
.ng-foot-col a span {
  color: var(--read-ink-soft) !important;
}
.ng-foot-col a:hover,
.ng-foot-col a:hover span {
  color: var(--read-teal) !important;
}
.ng-foot-base {
  color: var(--read-muted) !important;
  background: rgba(255, 255, 255, 0.85) !important;
}
.ng-foot-pay {
  color: var(--read-ink) !important;
}

/* ── Dark panels (force light text) ── */
.ng-home-hero,
.ng-home-hero-copy,
.ng-dash-status,
.ng-market-hero-stat,
.ng-bag-count,
.ng-ledger-count,
.ng-desk-status,
.ng-seal-badge,
.ng-atlas-compass,
.ng-aisle-total-main,
.ng-loom-intro,
.a86-seal-medallion,
.ng-orbit-meta,
.ng-chrono-visual span,
.ng-radar-core,
.ng-cat-tile-copy {
  color: var(--read-on-dark) !important;
}
.ng-home-brand,
.ng-home-headline,
.ng-home-lede,
.ng-home-actions .ng-btn--ghost,
.ng-cat-tile-copy strong,
.ng-cat-tile-copy small,
.ng-dash-status *,
.ng-market-hero-stat *,
.ng-bag-count *,
.ng-ledger-count *,
.ng-desk-status *,
.ng-seal-badge *,
.ng-atlas-compass *,
.ng-aisle-total-main *,
.ng-loom-intro *,
.a86-seal-medallion *,
.ng-orbit-meta *,
.ng-chrono-visual span,
.ng-radar-core * {
  color: var(--read-on-dark) !important;
}
.ng-dash-status > p,
.ng-status-metrics span,
.ng-market-hero-stat span,
.ng-bag-count span,
.ng-ledger-count span,
.ng-desk-status em,
.ng-seal-badge em,
.ng-atlas-compass em,
.ng-aisle-total-main span,
.ng-loom-intro p,
.a86-seal-medallion span,
.ng-orbit-meta span {
  color: var(--read-on-dark-soft) !important;
}
.ng-orbit-meta em {
  color: #FDE68A !important;
}
.ng-signal-dish-wrap {
  color: var(--read-on-dark) !important;
}
.ng-signal-dish-wrap .ng-signal-blip-item {
  color: var(--read-on-dark-soft) !important;
}
.ng-signal-dish-wrap .ng-signal-blip-item.is-captured,
.ng-signal-dish-wrap .ng-signal-blip-item.is-active,
.ng-signal-dish-wrap .ng-signal-blip-item strong,
.ng-signal-dish-wrap .ng-signal-blip-item.is-captured em,
.ng-signal-dish-wrap .ng-signal-blip-item.is-active em {
  color: var(--read-white) !important;
}

/* ── Chips / tags on light ── */
.ng-chip,
.a86-section-tag,
.a86-seal-kicker {
  color: var(--read-teal) !important;
  background: rgba(13, 148, 136, 0.14) !important;
}

/* ── Forms on light ── */
.page-main input:not([type="checkbox"]):not([type="radio"]),
.page-main select,
.page-main textarea,
.ng-foot-form input {
  color: var(--read-ink) !important;
  background: #FFFFFF !important;
}
.page-main input::placeholder,
.page-main textarea::placeholder,
.ng-foot-form input::placeholder {
  color: #5a736c !important;
  opacity: 1 !important;
}
/* Keep nav search white-on-dark (override form rule) */
.ae-chrys-seek input {
  color: var(--read-white) !important;
  background: transparent !important;
}

/* ── Interactive light controls ── */
.ng-lot-pill,
.a86-view-btn,
.ng-tray-tabs button,
.ng-vault-rail-btn,
.ng-vault-rail-btn strong,
.ng-vault-switch-btn,
.ng-loom-thread,
.ng-loom-thread strong,
.ng-loom-signal-q,
.ng-market-field-head,
.ng-market-check,
.ng-bag-qty button,
.ng-lot-stepper button,
.ng-lot-tab-link {
  color: var(--read-ink) !important;
}
.ng-lot-pill.is-active,
.ng-market-chip:has(input:checked) {
  color: var(--read-white) !important;
  background: linear-gradient(135deg, #0D9488, #0F766E) !important;
}
.a86-view-btn.is-active,
.ng-tray-tabs button.is-active,
.ng-vault-switch-btn.is-active,
.ng-lot-tab-link.is-active,
.ng-vault-rail-link {
  color: var(--read-teal) !important;
}
.ng-bag-qty button:hover,
.ng-lot-stepper button:hover {
  color: var(--read-white) !important;
  background: #0D9488 !important;
}

/* ── Notices ── */
.notice, .alert, #profileVerifyNotice, #accountMessage {
  color: var(--read-ink) !important;
}
.ng-vault-toast {
  color: var(--read-white) !important;
  background: var(--read-ink) !important;
}
.notice.error, .alert.error, .error, .form-error,
.a86-seal-error, .ng-loom-empty {
  color: #9f1239 !important;
}
.notice.success, .alert.success, .success {
  color: #065f46 !important;
}

/* ── Product / shop cards on light ── */
.ng-stream-body h3,
.ng-film-frame h3,
.ng-tray-grid .a86-product-card h3,
.ng-bag-info h3,
.ng-whisper span,
.ng-orbit-mini span,
.ng-radar-node span {
  color: var(--read-ink) !important;
}
.ng-stream-price,
.ng-film-frame .a86-product-price,
.ng-tray-grid .a86-product-price,
.a86-product-price {
  color: var(--read-teal) !important;
}

/* Loom intro chip/span stays mint on dark */
.ng-loom-intro span {
  color: #5EEAD4 !important;
}
/* Chrono clock numbers stay dark on light tiles */
.ng-chrono-clock strong {
  color: var(--read-ink) !important;
}
.ng-chrono-clock span {
  color: var(--read-muted) !important;
}
/* Beacon / ledger card text on light */
.ng-beacon-lookup h2,
.ng-beacon-card,
.ng-beacon-step strong,
.ng-ledger-guest h2,
.ng-ledger-empty h2,
.a86-ladder-rung-id,
.a86-ladder-rung-meta dd,
.ng-vault-welcome h2,
.ng-vault-page-head h3,
.ng-desk-scroll-head h2,
.a86-seal-scroll-head h2,
.a86-seal-ledger-body h2 {
  color: var(--read-ink) !important;
}

/* Home hero brand — solid ink only (no transparent clip text) */
.ng-hero-brand {
  color: var(--read-ink) !important;
  -webkit-text-fill-color: var(--read-ink);
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
}
.ng-hero-line {
  color: var(--read-ink-soft) !important;
}
.ng-hero-lede {
  color: var(--read-muted) !important;
}