/* Shared by product pages and temporary catalog/home previews. */
.product-accent-vms,
body.product-preview:has(.product-accent-vms:focus-visible),
body.product-preview:has(.product-card-accent.product-accent-vms:hover) {
  --product-accent: #2d8b64;
  --product-accent-rgb: 45, 139, 100;
  --product-button: #237550;
  --product-button-text: #fff;
  --product-button-hover: #1c6242;
  --product-link-dark: #86dfb1;
  --product-link-light: #145c3f;
}
.product-accent-sdp,
.product-accent-ost,
body.product-preview:has(:is(.product-accent-sdp, .product-accent-ost):focus-visible),
body.product-preview:has(.product-card-accent:is(.product-accent-sdp, .product-accent-ost):hover) {
  --product-accent: #38bdf8;
  --product-accent-rgb: 56, 189, 248;
  --product-button: #38bdf8;
  --product-button-hover: #7dd3fc;
  --product-button-text: #082f49;
  --product-link-dark: #7dd3fc;
  --product-link-light: #075575;
}
.product-accent-ast,
body.product-preview:has(.product-accent-ast:focus-visible),
body.product-preview:has(.product-card-accent.product-accent-ast:hover) {
  --product-accent: #3b82f6;
  --product-accent-rgb: 59, 130, 246;
  --product-button: #2563eb;
  --product-button-text: #fff;
  --product-button-hover: #1d4ed8;
  --product-link-dark: #93c5fd;
  --product-link-light: #1e40af;
}
.product-accent-dast,
body.product-preview:has(.product-accent-dast:focus-visible),
body.product-preview:has(.product-card-accent.product-accent-dast:hover) {
  --product-accent: #a855f7;
  --product-accent-rgb: 168, 85, 247;
  --product-button: #9333ea;
  --product-button-text: #fff;
  --product-button-hover: #7e22ce;
  --product-link-dark: #d8b4fe;
  --product-link-light: #6b21a8;
}
.product-accent-waf,
body.product-preview:has(.product-accent-waf:focus-visible),
body.product-preview:has(.product-card-accent.product-accent-waf:hover) {
  --product-accent: #f59e0b;
  --product-accent-rgb: 245, 158, 11;
  --product-button: #f59e0b;
  --product-button-hover: #fbbf24;
  --product-button-text: #231500;
  --product-link-dark: #fbbf24;
  --product-link-light: #92400e;
}
.product-accent-ai-gateway,
body.product-preview:has(.product-accent-ai-gateway:focus-visible),
body.product-preview:has(.product-card-accent.product-accent-ai-gateway:hover) {
  --product-accent: #2f6f62;
  --product-accent-rgb: 47, 111, 98;
  --product-button: #2f6f62;
  --product-button-text: #fff;
  --product-button-hover: #24584d;
  --product-link-dark: #8bd4c1;
  --product-link-light: #24584d;
}

/* Neutral foundations keep amber, green and purple free of the corporate blue cast. */
body.product-accent,
body.product-preview {
  --product-bg: color-mix(in srgb, var(--product-accent) 5%, #121212);
  --product-bg-2: color-mix(in srgb, var(--product-accent) 8%, #111111);
  --product-card: color-mix(in srgb, var(--product-accent) 5%, #242424);
  --product-card-hover: color-mix(in srgb, var(--product-accent) 10%, #282828);
  --product-link: var(--product-link-dark);
  --product-hero-strength: .24;
  --product-header-strength: .14;
}
html[data-theme="light"] body.product-accent,
html[data-theme="light"] body.product-preview {
  --product-bg: color-mix(in srgb, var(--product-accent) 4%, #f7f7f7);
  --product-bg-2: color-mix(in srgb, var(--product-accent) 2%, #fafafa);
  --product-card: #fff;
  --product-card-hover: color-mix(in srgb, var(--product-accent) 5%, #fff);
  --product-link: var(--product-link-light);
  --product-hero-strength: .13;
  --product-header-strength: .08;
}
body.product-accent {
  --primary: var(--product-button);
  --bg: var(--product-bg);
  --bg-2: var(--product-bg-2);
  --card: var(--product-card);
  --card-hover: var(--product-card-hover);
  --menu-bg: var(--product-bg);
}

/* Keep the existing geometry; only tint surfaces and their edge. */
body.product-accent > section:first-of-type {
  background:
    radial-gradient(ellipse at 85% 15%, rgba(var(--product-accent-rgb), var(--product-hero-strength)), transparent 70%),
    linear-gradient(135deg, rgba(var(--product-accent-rgb), .06), transparent 65%),
    var(--bg);
  box-shadow: inset 0 -1px rgba(var(--product-accent-rgb), .22);
}
html body.product-accent #site-header-slot > header.gradient-bg {
  background:
    linear-gradient(110deg, rgba(var(--product-accent-rgb), var(--product-header-strength)), transparent 80%),
    var(--bg);
  border-bottom-color: rgba(var(--product-accent-rgb), .22);
}

body.product-accent .btn.btn-primary {
  background: var(--product-button);
  color: var(--product-button-text, #fff);
}
body.product-accent .btn.btn-primary:hover,
body.product-accent .btn.btn-primary:focus-visible {
  background: var(--product-button-hover);
  box-shadow: 0 12px 28px rgba(var(--product-accent-rgb), .24);
}
/* Keep the theme toggle excluded without giving the base state ID specificity.
   Otherwise its translucent background wins over the filled hover/focus state. */
body.product-accent .btn.btn-outline:where(:not(#themeToggle)) {
  border-color: rgba(var(--product-accent-rgb), .5);
  color: var(--product-link);
  background: rgba(var(--product-accent-rgb), .04);
}
/* Override the legacy light-theme white label for bright cyan and amber buttons. */
html[data-theme] body.product-accent .section .btn.btn-outline:hover,
html[data-theme] body.product-accent .section .btn.btn-outline:focus-visible,
html[data-theme] body.product-accent header .btn.btn-outline:not(#themeToggle):hover,
html[data-theme] body.product-accent header .btn.btn-outline:not(#themeToggle):focus-visible {
  background: var(--product-button);
  border-color: var(--product-button);
  color: var(--product-button-text, #fff) !important;
  box-shadow: 0 12px 28px rgba(var(--product-accent-rgb), .24);
}

/* Text links use separate shades for readability on each theme's surfaces. */
html body.product-accent .section a:not(.btn) {
  color: var(--product-link) !important;
  text-decoration-color: rgba(var(--product-accent-rgb), .6);
}
body.product-accent .section a:not(.btn):hover {
  text-decoration: underline;
  text-underline-offset: .2em;
}
html body.product-accent :is(header, footer) a:not(.btn):hover,
html body.product-accent :is(header, footer) a:not(.btn):focus-visible {
  color: var(--product-link) !important;
}
body.product-accent :is(a, button, input):not(#themeToggle):not(#themeToggleMobile):focus-visible {
  outline: 2px solid var(--product-link);
  outline-offset: 3px;
}
body.product-accent .section li::marker {
  color: var(--product-link);
}

body.product-accent .section :is(.card, .vms-card, .dast-feature-card, .waf-feature-card, .ai-feature-card) {
  background: var(--card);
}
body.product-accent .section :is(.card, .vms-card, .dast-feature-card, .waf-feature-card, .ai-feature-card):is(:hover, :focus-within) {
  background: var(--card-hover);
  border-color: rgba(var(--product-accent-rgb), .45);
  box-shadow: 0 16px 34px rgba(var(--product-accent-rgb), .1);
}
body.product-accent .section :is(.vms-icon, .dast-feature-icon, .waf-feature-icon, .ai-feature-icon) {
  color: var(--product-link);
  background: rgba(var(--product-accent-rgb), .1);
  border-color: rgba(var(--product-accent-rgb), .3);
}
body.product-accent > section:first-of-type .card,
body.product-accent .section aside .card {
  border-color: rgba(var(--product-accent-rgb), .3);
  border-top-color: var(--product-accent);
}

body.product-preview .product-card-accent {
  --product-link: var(--product-link-dark);
}
html[data-theme="light"] body.product-preview .product-card-accent {
  --product-link: var(--product-link-light);
}
body.product-preview .product-card-accent:focus-visible {
  outline: 2px solid var(--product-link);
  outline-offset: 3px;
}

/* Like SolidWall's catalog: temporary CSS-only palette, no saved state.
   Hover-capable devices only, so a tap cannot leave a preview stuck on mobile. */
@media (hover: hover) {
  body.product-preview:has(.product-card-accent:is(:hover, :focus-visible)) {
    --primary: var(--product-button);
    --bg: var(--product-bg);
    --bg-2: var(--product-bg-2);
    --card: var(--product-card);
    --card-hover: var(--product-card-hover);
    --menu-bg: var(--product-bg);
  }
  html body.product-preview:has(.product-card-accent:is(:hover, :focus-visible)) .gradient-bg {
    background:
      radial-gradient(ellipse at 85% 15%, rgba(var(--product-accent-rgb), var(--product-hero-strength)), transparent 70%),
      var(--bg);
  }
  html body.product-preview:has(.product-card-accent:is(:hover, :focus-visible)) #site-header-slot > header {
    background:
      linear-gradient(110deg, rgba(var(--product-accent-rgb), var(--product-header-strength)), transparent 80%),
      var(--bg);
    border-bottom-color: rgba(var(--product-accent-rgb), .22);
  }
  body.product-preview:has(.product-card-accent:is(:hover, :focus-visible)) .btn.btn-primary {
    background: var(--product-button);
    color: var(--product-button-text, #fff);
  }
  body.product-preview .product-card-accent:is(:hover, :focus-visible) {
    background: var(--product-card-hover);
    border-color: var(--product-accent);
  }
  html body.product-preview .product-card-accent:is(:hover, :focus-visible) :is(h2, h3) {
    color: var(--product-link);
  }
}