:root {
  --site-background-color: #010000;
  --site-surface-color: #902020;
  --site-gradient-color-deep: #000000;
  --site-gradient-color-mid: #080001;
  --site-gradient-color-base: #150002;
  --site-gradient-glow-strong: rgba(166, 12, 20, 0.22);
  --site-gradient-glow-soft: rgba(166, 12, 20, 0.14);
  --site-gradient-glow-accent: rgba(255, 74, 84, 0.2);
  --site-gradient-glow-muted: rgba(255, 138, 138, 0.08);

  --site-gradient-default:
    radial-gradient(circle at 85% -10%, var(--site-gradient-glow-strong), transparent 45%),
    radial-gradient(circle at 12% 18%, var(--site-gradient-glow-soft), transparent 35%),
    linear-gradient(180deg, var(--site-gradient-color-deep) 0%, var(--site-gradient-color-mid) 35%, var(--site-gradient-color-base) 100%);

  --site-gradient-soft:
    radial-gradient(circle at 22% -16%, var(--site-gradient-glow-soft), transparent 48%),
    radial-gradient(circle at 70% 12%, var(--site-gradient-glow-muted), transparent 40%),
    linear-gradient(170deg, var(--site-gradient-color-deep) 0%, var(--site-gradient-color-mid) 42%, var(--site-gradient-color-base) 100%);

  --site-gradient-focus:
    radial-gradient(circle at 50% -18%, var(--site-gradient-glow-accent), transparent 42%),
    radial-gradient(circle at 18% 78%, var(--site-gradient-glow-muted), transparent 34%),
    linear-gradient(180deg, var(--site-gradient-color-deep) 0%, var(--site-gradient-color-mid) 42%, var(--site-gradient-color-base) 100%);

  --site-gradient-rigid:
    linear-gradient(
      90deg,
      #5e0009 0%,
      #5e0009 2%,
      #1f0003 5%,
      #000000 8%,
      #000000 92%,
      #1f0003 95%,
      #5e0009 98%,
      #5e0009 100%
    );
  --site-gradient-diagonal-burn:
    radial-gradient(120% 120% at 100% 0%, rgba(186, 0, 20, 0.34) 0%, rgba(186, 0, 20, 0.14) 24%, transparent 42%),
    radial-gradient(120% 120% at 0% 100%, rgba(186, 0, 20, 0.3) 0%, rgba(186, 0, 20, 0.12) 24%, transparent 42%),
    linear-gradient(35deg, #050000 0%, #000000 40%, #000000 62%, #120002 100%);
  --site-panel-gradient-top-bottom:
    linear-gradient(
      180deg,
      #050000 0%,
      #140001 3%,
      #6f0f14 8%,
      #a11f26 18%,
      #ad242b 50%,
      #a11f26 82%,
      #6f0f14 92%,
      #140001 97%,
      #050000 100%
    );
  --site-panel-background: var(--site-panel-gradient-top-bottom);
  --site-nav-gradient:
    linear-gradient(
      180deg,
      #000000 0%,
      #000000 20%,
      transparent 36%,
      transparent 64%,
      #000000 80%,
      #000000 100%
    ),
    radial-gradient(
      ellipse 56% 84% at 50% 50%,
      #8a1b21 0%,
      #7a151b 34%,
      #661015 50%,
      #4b090d 60%,
      #240305 70%,
      #110002 75%,
      #000000 100%
    );
  --site-background-gradient: var(--site-gradient-diagonal-burn);


  --footer-background-color: var(--site-background-color);
  --site-text-color: #f8fbff;
  --site-color-text: var(--site-text-color);
  --site-heading-color: var(--site-text-color);
  --site-contrast-color: var(--site-text-color);
  --site-panel-bg-color: var(--site-surface-color);
  --site-modal-background-color: var(--site-gradient-focus);
  --portal-hero-background: var(--site-panel-bg-color);
  --form-renderer-background-color: transparent;
  --form-renderer-border-color: transparent;
  --site-muted-text-color: #c6d7dc;
  --site-border-color: rgba(248, 251, 255, 0.2);
  --site-accent-color: var(--site-surface-color);
  --site-danger-color: #c01300;
  --site-success-color: #008015;
  --site-warning-color: #ecfc00;
  --site-nav-background-color: var(--site-nav-gradient);
  --site-nav-color: var(--site-text-color);
  --site-nav-active-color: #ff636d;
  --site-nav-hover-color: var(--site-nav-active-color);
  --site-section-badge-color: #d30000;
  --site-nav-mobile-background-color: var(--site-background-color);
  --site-nav-dropdown-background-color: var(--site-background-color);
  --site-nav-dropdown-color: var(--site-text-color);
  --site-nav-dropdown-hover-color: color-mix(in srgb, var(--site-text-color), #000 25%);
  --site-light-background-color: color-mix(in srgb, var(--site-surface-color), #ffffff 18%);
  --site-light-surface-color: color-mix(in srgb, var(--site-surface-color), #ffffff 8%);
  --site-dark-background-color: var(--site-background-color);
  --site-dark-default-color: var(--site-text-color);
  --site-dark-heading-color: var(--site-text-color);
  --site-dark-surface-color: var(--site-surface-color);
  --site-dark-contrast-color: var(--site-text-color);
  --site-header-background-color: var(--site-background-color);
  --site-header-heading-color: var(--site-text-color);
  --site-header-accent-color: rgba(0, 143, 163, 0);
  --site-header-scrolled-background-color: var(--site-header-background-color);
  --site-faq-background-color: var(--site-dark-background-color);
  --site-faq-surface-color: var(--site-dark-background-color);
  --site-cart-count-text-color: var(--site-background-color);
  --site-cart-count-background-color: #6cff93;
  --gallery-filter-menu-bg: var(--site-nav-background-color);
  --pluto-background-color: var(--site-background-color);
  --pluto-surface-color: var(--site-surface-color);
  --pluto-surface-alt-color: color-mix(in srgb, var(--site-surface-color), #000 15%);
  --pluto-text-color: var(--site-text-color);
  --pluto-heading-color: var(--site-text-color);
  --pluto-muted-text-color: var(--site-muted-text-color);
  --pluto-border-color: var(--site-border-color);
  --pluto-topbar-color: color-mix(in srgb, var(--site-background-color), #000 10%);
  --pluto-accent-color: var(--site-accent-color);
  --pluto-status-primary: var(--pluto-accent-color);
  --pluto-status-success: #1ed085;
  --pluto-status-info: #2196f3;
  --pluto-status-warning: #ffc107;
  --pluto-status-danger: #ff5722;
  --pluto-status-secondary: color-mix(in srgb, var(--site-muted-text-color), #000 20%);
  --pluto-status-light: color-mix(in srgb, var(--site-surface-color), #ffffff 20%);
  --pluto-status-dark: color-mix(in srgb, var(--site-surface-color), #000 25%);
  --pluto-plus-button-color: var(--pluto-status-success);

  /* Align main.css theme variables with the global site theme. */
  --background-color: var(--site-background-color);
  --default-color: var(--site-text-color);
  --heading-color: var(--site-heading-color);
  --surface-color: var(--site-surface-color);
  --contrast-color: var(--site-contrast-color);
  --accent-color: var(--site-accent-color);
}