/* ============================================================================
   CHAMELEON — the licence leads, literally. A quiet warm-paper shell at
   rest; entering a brand world re-themes the entire chrome to that brand's
   tokens with a slow costume change. Worlds DNA, brand-led anatomy.
   ========================================================================== */
:root {
  --paper: #F1EFE9;
  --bg: var(--paper);
  --ink: #1A1A1C;
  --muted: #6D6B66;
  --line: #DCD9D0;
  --card-bg: #FBFAF7;
  --accent: #1A1A1C;
  --accent-ink: #F1EFE9;
  --ok: #1B7A3E;
  --radius: 14px;
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Space Grotesk', system-ui, sans-serif;
}

/* THE COSTUME CHANGE — on brand/design/product pages the shell adopts the
   brand's tokens. Everything reading the token contract follows. */
html.is-skinned {
  --bg: var(--skin-bg);
  --ink: var(--skin-ink);
  --muted: color-mix(in srgb, var(--skin-ink) 62%, var(--skin-bg));
  --line: color-mix(in srgb, var(--skin-ink) 16%, var(--skin-bg));
  --card-bg: color-mix(in srgb, var(--skin-ink) 6%, var(--skin-bg));
  --accent: var(--skin-accent);
  --accent-ink: var(--skin-accent-ink);
}
html.is-skinned .confirm-ok,
html.is-skinned .card-fit.is-yes { color: var(--ink); }

body, .site-head, .site-foot, .btn, .card-badge, .bag-chip-count,
.finder-box, .type-tile, .confirm-card, .device-opt, .set-card,
.gate, .brand-card, .world-chip {
  transition: background-color .7s ease, color .7s ease, border-color .7s ease;
}
@media (prefers-reduced-motion: reduce) {
  body, .site-head, .site-foot, .btn, .card-badge, .bag-chip-count,
  .finder-box, .type-tile, .confirm-card, .device-opt, .set-card,
  .gate, .brand-card, .world-chip { transition: none; }
}

/* Rounded, soft, tactile shell. */
.brand-word { font-weight: 700; letter-spacing: .12em; }
.brand-mark { border-radius: 50%; }
.head-search, .device-chip, .bag-chip { border-radius: 999px; }
.head-nav a { font-weight: 500; }

.hero.has-bg { margin: 1.1rem 1.25rem 0; border-radius: 26px;
  min-height: min(70vh, 700px); }
@media (min-width: 1330px) {
  .hero.has-bg { margin-inline: auto; width: min(1280px, 100%); }
}
.callout { border-radius: 18px; }
/* Daylight hero: Chameleon inverts the treatment — dark ink over a light
   veil, so the airy paper shell continues into the imagery. */
.hero.has-bg { color: #1A1A1C; }
.hero.has-bg .hero-bg::after { background: linear-gradient(180deg,
  rgba(241, 239, 233, .88) 0%, rgba(241, 239, 233, .55) 42%,
  rgba(241, 239, 233, .18) 100%); }
.hero.has-bg .hero-kicker, .hero.has-bg .hero-sub, .hero.has-bg .hero-device,
.hero.has-bg .hero-worlds-label { color: rgba(26, 26, 28, .78); }
.hero.has-bg .world-chip { border-color: rgba(26, 26, 28, .38);
  color: #1A1A1C; background: rgba(251, 250, 247, .55); }
.hero.has-bg .callout { background: rgba(251, 250, 247, .78);
  color: #1A1A1C; border-color: rgba(26, 26, 28, .16);
  box-shadow: 0 12px 30px rgba(26, 26, 28, .14); }
.hero.has-bg .callout:hover { border-color: rgba(26, 26, 28, .45);
  background: rgba(251, 250, 247, .92); }
.hero.has-bg .finder-box { box-shadow: 0 12px 30px rgba(26, 26, 28, .18); }
.hero-title { font-weight: 700; letter-spacing: -.02em; }
.hero-title em { font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic; font-weight: 400; }
.hero-kicker { font-weight: 500; }
.hero-sub { font-family: 'Instrument Serif', Georgia, serif; font-size: 1.2rem; }
.finder-box { border-radius: 999px; border-width: 2px; }
.finder-results { border-radius: 18px; }
.finder-item:first-child { padding-top: .8rem; }
.finder-item:last-child { padding-bottom: .8rem; }

.section-h { font-weight: 700; letter-spacing: -.01em; }
.section-sub { font-family: 'Instrument Serif', Georgia, serif; font-size: 1.02rem; }

/* Gates preview their world's palette on hover. */
.gate { border-radius: 22px; border-width: 2px; }
.gate[data-genre="sports"]:hover  { border-color: #E87722; }
.gate[data-genre="anime"]:hover   { border-color: #C8332B; }
.gate[data-genre="fashion"]:hover { border-color: #D42B5A; }
.gate[data-genre="comics"]:hover  { border-color: #E8C13D; }
.gate[data-genre="art"]:hover     { border-color: #8B5CF6; }
.gate-art { aspect-ratio: 16 / 10; }
.gate-cta { color: var(--accent); }
html:not(.is-skinned) .gate-cta { color: var(--ink); border-bottom: 2px solid currentColor; }

.card-art { border-radius: 18px; }
.card-badge { border-radius: 999px; }
.world-chip { border-width: 2px; font-weight: 600; }

.brand-card { border-radius: 22px; border-width: 2px; }
.brand-card:hover { background: var(--b-bg); color: var(--b-ink); }
.brand-card:hover .brand-card-line { color: var(--b-ink); opacity: .8; }
.brand-card:hover .brand-card-cta { color: var(--b-accent, var(--b-ink)); }
.brand-card-cta::after { content: ' →'; }

.btn { border-radius: 999px; font-weight: 700; }
.type-tile { border-radius: 16px; }
.type-tile.is-current { box-shadow: 0 0 0 2px var(--accent); }
.device-opt.is-current { background: var(--accent); color: var(--accent-ink);
  border-color: var(--accent); }
.device-opt.is-current em { color: inherit; }
.confirm-card { border-radius: 18px; border-width: 2px; }
.set-card { border-radius: 18px; }
.set-card-reason { color: var(--accent); font-style: normal; font-weight: 600; }
html:not(.is-skinned) .set-card-reason { color: var(--ink); }

.brand-hero { border-radius: 26px; box-shadow: 0 30px 70px rgba(0, 0, 0, .22); }
.brand-hero-name { font-weight: 700; letter-spacing: -.02em; }
.brand-hero-line { font-family: 'Instrument Serif', Georgia, serif; font-size: 1.2rem; }
.brand-hero .btn-primary { color: var(--skin-accent-ink, #131313); }

.genre-hero { border-radius: 26px; }
.setstory-media img, .brand-set-media img, .hub-art img, .pdp-art img,
.imgbox { border-radius: 22px; }
.atmos img { border-radius: 18px; }

.hub-step-label span { background: var(--accent); color: var(--accent-ink); }
.confirm-price { font-weight: 700; }
.bag-panel { border-radius: 22px 0 0 22px; }
.bag-checkout, .bag-suggest-add { border-radius: 999px; }
.device-dialog { border-radius: 22px; }

.site-foot { background: transparent; }
.proof strong { font-weight: 700; }