@import url("../cupcakes/style.css?v=20260615-181704");

:root {
  --page-bg: linear-gradient(180deg, #160a09 0%, #2e130f 44%, #4b1d15 100%);
  --panel-bg: rgba(36, 16, 13, 0.92);
  --panel-border: rgba(219, 179, 97, 0.22);
  --board-bg: #5a2419;
  --cell-bg: rgba(248, 224, 180, 0.14);
  --text-main: #fff3de;
  --text-muted: #e1cfb0;
  --button-main: #c84e2f;
  --button-main-hover: #aa3f25;
  --button-secondary: rgba(34, 16, 12, 0.96);
  --shadow-soft: 0 24px 52px rgba(15, 6, 5, 0.5);
  --shadow-card: 0 12px 28px rgba(17, 7, 5, 0.34);
  --chrome-surface: rgba(26, 12, 10, 0.96);
  --chrome-surface-strong: rgba(31, 14, 11, 0.985);
  --chrome-border: rgba(219, 179, 97, 0.2);
  --chrome-text: #fff3de;
  --chrome-text-muted: #e1cfb0;
  --chrome-accent: #e3b25b;
  --chrome-accent-hover: #f1cb82;
}

body {
  background:
    radial-gradient(circle at 14% 16%, rgba(203, 76, 47, 0.16), transparent 18%),
    radial-gradient(circle at 82% 12%, rgba(230, 185, 92, 0.12), transparent 18%),
    radial-gradient(circle at 78% 78%, rgba(255, 235, 204, 0.08), transparent 18%),
    var(--page-bg);
  color: var(--text-main);
}

.site-nav,
.seo-content,
.overlay-card,
.score-card {
  background: rgba(35, 16, 13, 0.94);
  border-color: rgba(219, 179, 97, 0.24);
}

.site-nav {
  background: rgba(29, 13, 11, 0.97) !important;
  border-bottom-color: rgba(219, 179, 97, 0.16) !important;
}

.site-brand,
.site-nav-link,
.site-nav-mobile-link,
.site-nav-dropdown > summary,
.site-nav-mobile-group > summary,
.site-theme-link,
.site-language-trigger,
.site-language-option,
.theme-card h3,
.variant-comparison th,
.faq-section h3,
.seo-content h2,
.seo-content h3,
.topbar h1,
.score-card strong,
.overlay-card h2 {
  color: var(--text-main) !important;
}

.seo-content p,
.faq-section p,
.theme-card p,
.variant-comparison td,
.score-card .label,
.overlay-card p,
.subtitle,
.theme-label,
.site-nav-link,
.site-nav-mobile-link,
.site-nav-dropdown > summary,
.site-nav-mobile-group > summary,
.site-theme-link,
.site-language-trigger,
.site-language-option,
.site-language-option span,
.site-language-trigger-meta,
.site-language-option small {
  color: var(--text-muted) !important;
}

.site-brand,
.site-nav-link,
.theme-card,
.variant-comparison,
.board-frame {
  background: rgba(46, 20, 15, 0.96);
  border-color: rgba(219, 179, 97, 0.2);
}

.site-nav-link:hover,
.site-nav-link.is-active,
.site-nav-mobile-link:hover,
.site-nav-mobile-link.is-active,
.site-nav-dropdown > summary:hover,
.site-nav-dropdown > summary.is-active,
.site-nav-mobile-group > summary:hover,
.site-nav-mobile-group > summary.is-active,
.site-theme-link:hover,
.site-theme-link.is-active,
.site-language-trigger:hover,
.site-language-option:hover,
.site-language-option.is-active,
.seo-content a {
  color: var(--chrome-accent) !important;
}

.site-nav-menu,
.site-nav-mobile,
.site-language-trigger,
.site-language-menu,
.site-nav-mobile-theme-links {
  background: rgba(35, 16, 13, 0.97) !important;
  border-color: rgba(219, 179, 97, 0.18) !important;
}

.site-language-option:hover,
.site-language-option:focus-visible {
  background: rgba(73, 31, 21, 0.96) !important;
}

.site-language-option.is-active {
  background: rgba(109, 48, 29, 0.96) !important;
  border-color: rgba(241, 203, 130, 0.32) !important;
}

.site-nav-toggle,
.site-nav-toggle:hover,
.site-nav-toggle:focus-visible {
  color: var(--text-main) !important;
  border-color: rgba(219, 179, 97, 0.22) !important;
  background: rgba(34, 15, 12, 0.94) !important;
}

.site-nav-toggle-bars span {
  background: var(--text-main) !important;
}

.primary,
#overlay-restart-btn {
  color: #fff6eb;
}

.variant-comparison thead {
  background: linear-gradient(180deg, rgba(227, 178, 91, 0.18), rgba(227, 178, 91, 0.08));
}

.variant-comparison tbody tr:hover {
  background: rgba(227, 178, 91, 0.08);
}