:root {
  /* CommerceKing Brand Colors (updated 2026-03-24, WCAG AA contrast fix) */
  /* Original palette: Teal #00B2A9, Pink #EF426F, Orange #FF8200, Black #000000, Silver #C4CED4 */
  /* Adjusted for WCAG 2.1 AA contrast (4.5:1 min against white) */
  --primary-color: #007A74;     /* Teal - darkened from #00B2A9 for AA contrast (5.20:1) */
  --secondary-color: #C43358;   /* Pink - darkened from #EF426F for AA contrast (5.30:1) */
  --accent-color: #B85E00;      /* Orange - darkened from #FF8200 for AA contrast (4.53:1) */
  --light-bg: #f0f2f4;          /* Derived from Silver - page backgrounds */
  --dark-bg: #0f172a;
  --light-txt: #fff;
  --dark-txt: #000000;          /* Black - body text */
  --error-color: #ff0201;
  --disabled-color: #ddd;
  --outline-color: #C4CED4;     /* Silver - borders, outlines */

  /* Layout Colors (RGB for opacity support) */
  --color-bg: 255 255 255;
  --color-border: 255 255 255;
  --color-box: 255 255 255;
  --box-border: 229 231 235;
  --box-sd: 226 232 240 / 0.5;
  --heading-1: 15 23 42;
  --heading-2: 30 41 59;
  --heading-3: 71 85 105;
}

.dark {
  --color-bg: 15 23 42;
  --color-box: 30 41 59;
  --box-border: 243 244 246/0.1;
  --box-sd: transparent;

  --heading-1: 255 255 255;
  --heading-2: 243 244 246;
  --heading-3: 209 213 219;
}

html {
  scroll-behavior: smooth;
}
body {
  font-family: "Inter", sans-serif;
}

[data-toggle-nav][data-open-nav="true"] #line1 {
  transform: translateY(0.375rem) rotate(40deg);
}
[data-toggle-nav][data-open-nav="true"] #line2 {
  transform: scaleX(0);
  opacity: 0;
}
[data-toggle-nav][data-open-nav="true"] #line3 {
  transform: translateY(-0.375rem) rotate(-40deg);
}

[data-nav-overlay][data-is-visible="true"] {
  visibility: visible;
  display: flex;
}

.glass {
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(35px);
}

.glass-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(35px);
  border-radius: 20px;
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
}

/* HubSpot Form Styling */
.hs-form-frame button[type="submit"],
.hs-form-frame input[type="submit"],
.hs-form-frame .hs-button {
  background-color: #FF8200 !important;
  border-color: #FF8200 !important;
  color: #fff !important;
  border-radius: 0.5rem;
  font-weight: 600;
  transition: background-color 0.2s ease;
}
.hs-form-frame button[type="submit"]:hover,
.hs-form-frame input[type="submit"]:hover,
.hs-form-frame .hs-button:hover {
  background-color: #B85E00 !important;
  border-color: #B85E00 !important;
}