/* Remode brand system for any page that is not the homepage (the homepage carries the same tokens in
 * world-comic.css). Mirrors brand/remode-brand.json; see docs/BRAND_SYSTEM.md. Components are
 * opt-in classes (rb-*), so loading this file never restyles a page by itself beyond tokens and type. */
:root {
  --rb-ink:#140A10; --rb-plum:#5D2440; --rb-night:#241019;
  --rb-pink:#E0558F; --rb-pink-shadow:#E58AB1;
  --rb-gold:#D9B26F; --rb-gold-soft:#F6E9CF; --rb-rose-soft:#F7DCE8; --rb-rose:#F4C9DC;
  --rb-cream:#FFFAF4; --rb-paper:#FFFDFA; --rb-text:#2B2226; --rb-muted:#5E4E57;
  --rb-serif:'Playfair Display',Georgia,serif;
  --rb-sans:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --rb-radius:18px; --rb-radius-sm:12px; --rb-pill:999px;
}
.rb-page { background:var(--rb-cream); color:var(--rb-text); font-family:var(--rb-sans); }
.rb-page h1, .rb-page h2 { color:var(--rb-ink); font-family:var(--rb-serif); font-weight:700; letter-spacing:-.035em; }
.rb-page h1 em, .rb-page h2 em { color:var(--rb-pink); font-style:italic; }
.rb-kicker { color:var(--rb-plum); font:800 11px/1.5 var(--rb-sans); letter-spacing:.16em; text-transform:uppercase; }
.rb-panel { border:2.5px solid var(--rb-ink); border-radius:var(--rb-radius); background:var(--rb-paper); box-shadow:6px 7px 0 var(--rb-pink-shadow); }
.rb-panel.is-gold { box-shadow:6px 7px 0 var(--rb-gold); }
.rb-btn, .rb-btn-secondary, .rb-chip {
  display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:0 18px;
  border:2px solid var(--rb-ink); border-radius:var(--rb-pill); font:800 13px/1.2 var(--rb-sans); text-decoration:none; cursor:pointer;
}
.rb-btn { background:var(--rb-plum); color:var(--rb-cream); box-shadow:3px 3px 0 var(--rb-ink); }
.rb-btn-secondary, .rb-chip { background:#fff; color:var(--rb-plum); box-shadow:3px 3px 0 var(--rb-gold); }
.rb-chip[aria-pressed="true"] { background:var(--rb-plum); color:var(--rb-cream); box-shadow:3px 3px 0 var(--rb-ink); }
.rb-btn:focus-visible, .rb-btn-secondary:focus-visible, .rb-chip:focus-visible { outline:3px solid var(--rb-pink); outline-offset:3px; }
@media (hover:hover) { .rb-btn-secondary:hover, .rb-chip:not([aria-pressed="true"]):hover { background:var(--rb-rose-soft); } }
.rb-badge, .rb-badge-app {
  display:inline-flex; align-items:center; width:max-content; padding:4px 10px; border:1.5px solid var(--rb-ink); border-radius:var(--rb-pill);
  background:var(--rb-rose-soft); color:var(--rb-ink); font:800 10px/1.3 var(--rb-sans); letter-spacing:.1em; text-transform:uppercase;
}
.rb-badge-app { background:var(--rb-gold-soft); }
@media (prefers-reduced-motion:reduce) { .rb-btn, .rb-btn-secondary, .rb-chip { transition:none; } }