/* KUPPA's warm dark palette. This is part of the site, not a browser filter. */
:root {
  color-scheme: dark;
  --k-cream: #241b0d;
  --k-paper: #302618;
  --k-muted: #b7ab95;
  --k-line: #4b3c28;
  --k-blue: #8da2ff;
  --k-green: #34402a;
  --k-shadow: 0 22px 58px rgba(0, 0, 0, .38);
}

html,
body {
  background: var(--k-cream);
  color: #f3ecdf;
}

::selection { background: var(--k-yellow); color: #181522; }

.kuppa-header {
  background: rgba(31, 24, 12, .94);
  border-bottom-color: rgba(245, 239, 228, .11);
}
.kuppa-nav__list a { color: #d9ceb9; }
.kuppa-nav__list a:hover,
.kuppa-nav__list .current-menu-item > a { color: var(--k-yellow); }
.kuppa-menu-toggle {
  color: #f3ecdf;
  background: #382d1c;
}
.kuppa-menu-toggle:hover,
.kuppa-icon-button:hover { background: #3a2e1b; }
.kuppa-nav { background: #211a10; }
.site-header__game {
  border-color: #665438;
  background: #2c2315;
  color: #f3ecdf;
}
.site-header__game:hover { background: #42351d; color: #fff8e8; }
.kuppa-kicker,
.kuppa-kicker a { color: #a4b1ff; }

.kuppa-hero {
  background:
    radial-gradient(ellipse at 82% 34%, rgba(245, 215, 68, .16) 0, transparent 30%),
    linear-gradient(145deg, #21190c, #2c210e);
}
.kuppa-eyebrow {
  border-color: #554326;
  background: #332714;
  color: #f3ecdf;
}
.kuppa-hero h1 em { color: #86a3f4; }
.kuppa-hero__copy > p,
.kuppa-hero__proof,
.kuppa-section-heading > p,
.kuppa-collection__body p,
.kuppa-empty-shelf p,
.kuppa-story__copy > p,
.kuppa-prose,
.faq-layout > div:first-child > p { color: var(--k-muted); }
.kuppa-button--quiet,
.kuppa-button--outline {
  color: #f3ecdf;
  border-color: #665438;
}
.kuppa-button--quiet:hover,
.kuppa-button--outline:hover {
  background: #3a2e1b;
  color: #fffaf0;
}
.kuppa-mascot-card {
  border-color: #29231d;
  background: #29231d;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .42);
}
.kuppa-card-index {
  border-color: rgba(245, 239, 228, .16);
  background: rgba(39, 30, 15, .94);
  color: #f6edd9;
}
.kuppa-visual-stamp { border-color: #ddcda9; color: #e4d6b9; }

.kuppa-section--products,
.site-shelf,
.game-teaser,
.catalog-products,
.product-detail__more,
.game-section {
  background: #211a10;
}
.kuppa-collection,
.kuppa-products li.product,
.product-card,
.site-shelf__inner,
.kuppa-empty-shelf,
.kuppa-faq-list details,
.kuppa-social-login {
  border-color: var(--k-line);
  background: var(--k-paper);
  color: #f3ecdf;
}
.kuppa-collection__art > span,
.product-art__stamp,
.product-art__index {
  border-color: rgba(24, 21, 34, .2);
  background: rgba(255, 249, 226, .94);
  color: #292313;
}
.site-shelf__cat span {
  background: rgba(255, 253, 242, .94);
  color: #292313;
}
.site-shelf__note { border-color: #806d4c; color: #e5d8bf; }
.site-shelf__inner p,
.game-teaser__inner p { color: #c2b69e; }
.game-teaser__inner {
  background: linear-gradient(110deg, #2b2538, #38291e 66%, #4b3d10);
}
.game-teaser__sticker { border-color: rgba(243, 236, 223, .55); color: #f3ecdf; }

.catalog-hero,
.catalog-hero--sun,
.catalog-hero--lilac,
.catalog-hero--coral,
.catalog-hero--blue {
  background:
    radial-gradient(ellipse at 82% 46%, rgba(245, 215, 68, .14) 0, transparent 36%),
    linear-gradient(145deg, #241b0d, #2a2115);
}
.breadcrumbs { color: #b7ab95; }
.breadcrumbs a:hover,
.kuppa-faq-list a { color: #a4b1ff; }
.catalog-hero__grid > div:first-child > p,
.product-detail__description,
.product-detail__price span,
.product-shop-hint,
.faq-layout > div:first-child > p { color: var(--k-muted); }
.catalog-hero__visual img {
  border-radius: 50%;
  background: var(--k-yellow);
  mix-blend-mode: multiply;
}
.game-teaser__inner > img {
  border-radius: 50%;
  background: var(--k-yellow);
  mix-blend-mode: multiply;
}
.catalog-products .product-card,
.product-detail__visual .product-art {
  border-color: var(--k-line);
  background-color: #302618;
}
.product-art {
  background-image: radial-gradient(ellipse at 50% 80%, rgba(255, 253, 248, .28) 0, transparent 52%);
}
.product-card__top,
.price-placeholder { color: #c4b89f; }
.product-card__bottom { border-color: var(--k-line); }
.product-status {
  background: #4a3d18;
  color: #f2df8c;
}
.product-detail__price {
  border-color: var(--k-line);
}
.kuppa-faq-list details p,
.kuppa-faq-list summary { color: #f3ecdf; }
.kuppa-faq-list summary:after { color: #a4b1ff; }
.catalog-bottom { background: #17141d; }

.kuppa-commerce .woocommerce-ordering select,
.kuppa-commerce select,
.kuppa-commerce input[type="text"],
.kuppa-commerce input[type="email"],
.kuppa-commerce input[type="tel"],
.kuppa-commerce input[type="password"],
.kuppa-commerce input[type="number"],
.kuppa-commerce textarea,
.kuppa-commerce .wc-block-components-text-input input,
.kuppa-commerce .wc-block-components-combobox .components-combobox-control__input,
.kuppa-commerce .wc-block-components-select select,
.kuppa-commerce .wc-block-components-textarea {
  border-color: var(--k-line) !important;
  background: #211a10 !important;
  color: #f3ecdf !important;
}
.kuppa-commerce .woocommerce ul.products li.product,
.kuppa-commerce .woocommerce table.shop_table,
.kuppa-commerce .woocommerce .cart-collaterals .cart_totals,
.kuppa-commerce .woocommerce .woocommerce-checkout-review-order,
.kuppa-commerce .woocommerce form.checkout_coupon,
.kuppa-commerce .woocommerce form.login,
.kuppa-commerce .woocommerce form.register,
.kuppa-commerce .woocommerce-MyAccount-navigation ul {
  border-color: var(--k-line);
  background: var(--k-paper);
  color: #f3ecdf;
}
.kuppa-commerce .woocommerce div.product .woocommerce-product-details__short-description,
.kuppa-commerce .woocommerce .woocommerce-tabs .panel,
.kuppa-commerce .woocommerce-MyAccount-content { color: #c2b69e; }
.kuppa-commerce .woocommerce .woocommerce-tabs ul.tabs li,
.kuppa-commerce .woocommerce-MyAccount-navigation .is-active a { background: #3a2e1b; }
.kuppa-commerce .woocommerce-message,
.kuppa-commerce .woocommerce-info,
.kuppa-commerce .woocommerce-error { background: #302618; color: #f3ecdf; }
.kuppa-commerce .woocommerce div.product div.images img { background: #302618; }

/* Kuppati's play and prize screens keep the yellow game accents, with dark surfaces. */
.game-intro {
  background:
    radial-gradient(ellipse at 84% 52%, rgba(245, 215, 68, .14) 0, transparent 38%),
    linear-gradient(135deg, #241b0d, #2d2112);
}
.game-intro h1 em { color: #a4b1ff; }
.game-intro__copy > p { color: var(--k-muted); }
.game-howto span {
  border-color: var(--k-line);
  background: #332918;
  color: #ece2cf;
}
.game-console,
.wheel-console {
  border-color: var(--k-line);
  background: #302618;
  box-shadow: var(--k-shadow);
}
.game-stat,
.sound-toggle,
.wheel-balance {
  border-color: var(--k-line);
  background: #211a10;
  color: #f3ecdf;
}
.game-stat span,
.game-stat small,
.game-fineprint,
.wheel-balance > span:first-child,
.wheel-balance > span:last-child,
.wheel-odds { color: #b7ab95; }
.game-stat--food { border-color: #705b20; background: #403411; }
.game-stat--food strong { color: #f2dc76; }
.sound-toggle:hover { background: #3a2e1b; }
.game-table {
  border-color: #76612a;
  background:
    radial-gradient(ellipse at 50% 35%, #675320 0, transparent 67%),
    linear-gradient(145deg, #493912, #30250f);
}
.game-table__label,
.game-table__stamp { color: #f0dda1; }
.game-table__stamp { border-color: #9c8649; }
.game-table__edge {
  border-top-color: #9c7d32;
  background: linear-gradient(#8c702e, #6f5621);
}
.game-message { color: #f3ecdf; }
.mascot-host { background: linear-gradient(160deg, #292437, #17141d); }
.mascot-host__portrait { border-color: #4b3c28; }
.wheel-section {
  background: linear-gradient(145deg, #241b0d, #292136);
}
.wheel-balance { border-color: var(--k-line); }
.wheel-balance strong { color: #f3ecdf; }
.wheel-rim {
  border-color: #685532;
  background: linear-gradient(145deg, #55451e, #342a18);
  box-shadow: 0 20px 35px rgba(0, 0, 0, .38);
}
.wheel-message { color: #f3ecdf; }
.wheel-bottom-note {
  border-color: #62546e;
  background: #30283a;
  color: #d8cee4;
}
.wheel-bottom-note > span { color: #b2a3ff; }
.wheel-bottom-note strong { color: #f3ecdf; }
.coupon-card {
  border-color: #55462e;
  background: #302618;
  color: #f3ecdf;
}
.coupon-card > p:not(.coupon-copy-status) { color: #c2b69e; }
.coupon-card__close {
  background: #493b28;
  color: #f3ecdf;
}
.coupon-copy-status { color: #a4b1ff; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
