@import url('/fonts/huninn/fonts.css');
@import url('/fonts/noto-sans-tc/fonts.css');

/* Opt in only: donation pages, channel commands and video queues keep their theme. */
.public-brand {
  --brand-bg: #fffaf0;
  --brand-card: #fffdf8;
  --brand-ink: #332e25;
  --brand-muted: #716859;
  --brand-line: #ded5c4;
  --brand-yellow: #f1c75b;
  --brand-link: #805d12;
  --brand-font: 'TwitchBot Noto Sans TC', 'Noto Sans TC', sans-serif;
  --brand-heading: 'TwitchBot Huninn', var(--brand-font);
  color-scheme: light;
  background: var(--brand-bg);
  color: var(--brand-ink);
  font-family: var(--brand-font);
}
html.dark .public-brand {
  --brand-bg: #191917;
  --brand-card: #252521;
  --brand-ink: #f4eddd;
  --brand-muted: #c0b8a7;
  --brand-line: #4b473b;
  --brand-link: #f1c75b;
  color-scheme: dark;
}
.public-brand :is(h1,h2,h3) { font-family: var(--brand-heading); font-weight: 400; }
.public-brand [data-theme-toggle] {
  box-sizing: border-box;
  position: relative;
  display: inline-flex;
  flex: 0 0 76px;
  align-items: center;
  justify-content: center;
  width: 76px;
  min-width: 76px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: transparent;
  color: var(--brand-ink);
  cursor: pointer;
  box-shadow: none;
}
.public-brand [data-theme-toggle] > span {
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 76px;
  height: 36px;
  padding: 0 9px;
  border: 1px solid var(--brand-line);
  border-radius: 22px;
  background: var(--brand-card);
}
.public-brand [data-theme-toggle] > span::before {
  content: '';
  position: absolute;
  inset: 3px auto auto 3px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand-yellow);
  box-shadow: none;
  transform: translateX(0);
  transition: transform 180ms ease;
}
html.dark .public-brand [data-theme-toggle] > span::before { transform: translateX(40px); }
.public-brand [data-theme-toggle] svg {
  position: relative;
  z-index: 1;
  display: block;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  opacity: 1;
  transform: none;
}
.public-brand [data-theme-toggle] svg:first-of-type { color: #332e25; }
.public-brand [data-theme-toggle] svg:last-of-type { color: var(--brand-muted); }
html.dark .public-brand [data-theme-toggle] svg:first-of-type { color: var(--brand-muted); }
html.dark .public-brand [data-theme-toggle] svg:last-of-type { color: #332e25; }
.public-brand [data-theme-toggle]:focus-visible { outline: 3px solid var(--brand-link); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .public-brand [data-theme-toggle] > span::before { transition: none; } }

/* Existing public page contracts, recolored without changing content or actions. */
html body.public-brand:is(.privacy-page,.thanks-page,.status-page),
html.dark body.public-brand:is(.privacy-page,.thanks-page,.status-page) {
  --legal-bg: var(--brand-bg); --legal-surface: var(--brand-card); --legal-elevated: var(--brand-card);
  --legal-border: var(--brand-line); --legal-text: var(--brand-ink); --legal-muted: var(--brand-muted);
  --legal-plum: var(--brand-link); --legal-plum-hover: var(--brand-link);
  --thanks-bg: var(--brand-bg); --thanks-surface: var(--brand-card); --thanks-border: var(--brand-line);
  --thanks-text: var(--brand-ink); --thanks-muted: var(--brand-muted); --thanks-accent: var(--brand-link);
  --status-page-paper: var(--brand-bg); --status-page-surface: var(--brand-card);
  --status-page-rule: var(--brand-line); --status-page-rule-strong: var(--brand-line);
  --status-page-ink: var(--brand-ink); --status-page-muted: var(--brand-muted); --status-page-dim: var(--brand-muted);
  --status-page-accent: var(--brand-yellow); --status-page-accent-start: var(--brand-yellow); --status-page-accent-end: var(--brand-yellow);
  --status-page-accent-hover-start: #ffdb78; --status-page-accent-hover-end: #ffdb78; --status-page-accent-ink: #332e25;
  --status-page-accent-shadow: transparent; --status-page-focus: var(--brand-link);
  --status-page-font-body: var(--brand-font); --status-page-font-display: var(--brand-heading);
  background: var(--brand-bg);
}
html .public-brand:is(.privacy-page,.thanks-page)::before,
html .public-brand:is(.privacy-page,.thanks-page)::after { display: none; }
html .public-brand:is(.privacy-page,.thanks-page) .landing-nav { background: var(--brand-bg); border-color: var(--brand-line); }
.public-brand :is(.landing-brand,.status-page-brand,.admin-login-brand) { font-family: var(--brand-heading); font-weight: 400; }
html .public-brand:is(.privacy-page,.thanks-page) .landing-brand img { box-shadow: none; }
.public-brand .privacy-article { line-height: 1.95; }
.public-brand .privacy-article h1 { font-size: clamp(2rem,5vw,3rem); }
.public-brand .thanks-intro h1 { white-space: normal; line-height: 1.3; letter-spacing: 0; }
.public-brand .thanks-supporter-card { background: var(--brand-card); border-radius: 24px; }
html .public-brand.admin-login-page { background: var(--brand-bg); color: var(--brand-ink); }
.public-brand .admin-login-panel { padding: 28px; border-radius: 24px; border-color: var(--brand-line); background: var(--brand-card); color: var(--brand-ink); box-shadow: none; }
.public-brand .admin-login-heading :is(p,h1), .public-brand .admin-login-panel label { color: var(--brand-ink); }
.public-brand .admin-login-panel input { background: var(--brand-bg); color: var(--brand-ink); border-color: var(--brand-line); }
.public-brand .admin-login-submit { background: var(--brand-yellow); color: #332e25; border-color: var(--brand-line); }
.public-brand .admin-login-submit:hover { background: #ffdb78; }
.public-brand .brand-panel-header { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.public-brand.invite-confirm-page { margin:0; min-height:100dvh; display:grid; place-items:center; }
.public-brand .invite-confirm-panel { box-sizing:border-box; width:min(32rem,calc(100% - 32px)); padding:clamp(20px,5vw,40px); background:var(--brand-card); border:1px solid var(--brand-line); border-radius:24px; }
.public-brand .invite-confirm-panel p { color:var(--brand-muted); line-height:1.8; }
.public-brand .invite-confirm-panel strong { color:var(--brand-ink); }
.public-brand .invite-confirm-panel form { margin-top:24px; }
.public-brand .invite-confirm-panel button[type=submit] { width:100%; padding:14px; border:0; border-radius:12px; background:var(--brand-yellow); color:#332e25; font:inherit; cursor:pointer; }
.public-brand .invite-confirm-panel > a { display:block; margin-top:20px; color:var(--brand-link); }

.public-brand [data-theme-toggle] > span::after { display:none; }
.public-brand .status-page-content h1 { font-weight:400; line-height:1.3; letter-spacing:0; }