/* Contrast lock: light surfaces get dark type, dark surfaces get light type.
   Photo overlays may keep light type because they sit on a dark mask. */

body {
  color: var(--fg);
  background: var(--surface);
}

.btn {
  color: var(--on-ink);
  background: var(--ink);
}
body[data-layout="editorial"] .btn,
body[data-layout="conversion"] .btn {
  background: var(--accent);
  color: var(--on-accent);
}
.btn.ghost {
  background: transparent;
  color: var(--fg);
  border-color: color-mix(in srgb, var(--fg) 32%, transparent);
}

.kicker { color: var(--accent-dark); }
body[data-tone="dark"] .kicker { color: var(--accent); }

.benefit {
  color: color-mix(in srgb, currentColor 68%, transparent);
}

.preview-chip {
  background: var(--surface);
  color: var(--fg);
}

/* Light islands (white tickets, sheets, docks) always use dark type */
.cv-nav,
.cv-drop,
.cv-drop article,
.cv-item,
.cv-dept a,
.cv-list,
.icon-btn,
.cart,
.sheet,
.menu-sheet,
.dock,
.chip,
.kit-card,
#bundle-grid article,
.hy-card,
.hy-kit,
.search-sheet,
.cart-sheet {
  color: #121212;
}
.cv-nav .benefit,
.cv-drop .benefit,
.cv-item .benefit,
.hy-card .benefit,
.sheet .benefit {
  color: color-mix(in srgb, #121212 68%, transparent);
}

.cv-ticker,
body[data-variant="ticket"] .cv-foot,
body[data-variant="board"] .cv-foot {
  background: var(--ink);
  color: var(--on-ink);
}
body[data-variant="market"] .cv-ticker {
  background: var(--accent);
  color: var(--on-accent);
}
body[data-variant="market"] .cv-foot {
  background: #fff;
  color: #121212;
}

body[data-layout="conversion"] .cv-table article:last-child {
  color: var(--on-accent);
}

.hy-cats a.on,
.hy-cats a:hover {
  background: var(--ink);
  color: var(--on-ink);
  border-color: var(--ink);
}

/* Photo / overlay moments — light type on a dark mask, not on the page fill */
.ed-scene-buy,
.ed-scene-buy .kicker,
.ed-scene-buy .price,
.ed-scene-buy p,
.ls-chapters,
.ls-chapters h2,
.ls-chapters .benefit,
.ls-chapters .ls-page {
  color: #fff;
}
.ed-scene-buy .btn {
  background: #fff;
  color: #111;
}
.ed-scene-buy .btn.ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
}

body[data-tone="dark"] .hy-nav,
body[data-tone="dark"] .hy-cats,
body[data-tone="dark"] .tx-top,
body[data-tone="dark"] .ls-nav,
body[data-tone="dark"] .ed-nav {
  color: var(--fg);
}
body[data-tone="dark"] .hy-card,
body[data-tone="dark"] .hy-kit {
  background: color-mix(in srgb, var(--surface) 70%, #fff);
  color: #121212;
}
body[data-tone="light"] .ed-nav {
  color: var(--fg);
}