:root,
html:root {
  --ai-sva-brand: #00b9c2;
  --ai-sva-brand-hover: #00aab4;
  --ai-sva-brand-deep: #00747b;
  --ai-sva-brand-50: #effdfe;
  --ai-sva-brand-100: #d3fafc;
  --ai-sva-brand-200: #a7f4f7;
  --ai-sva-brand-300: #6cebf0;
  --ai-sva-brand-400: #2bdee5;
  --ai-sva-brand-500: #00b9c2;
  --ai-sva-brand-600: #00aab4;
  --ai-sva-brand-700: #00858e;
  --ai-sva-brand-800: #076b72;
  --ai-sva-brand-900: #0a5960;
}

/* Tailwind's existing orange utilities are the app's historical brand token.
   Remap them centrally so server-rendered and JavaScript-created UI agree. */
.bg-orange-50 { background-color: var(--ai-sva-brand-50) !important; }
.bg-orange-50\/40 { background-color: rgb(239 253 254 / .4) !important; }
.bg-orange-50\/60 { background-color: rgb(239 253 254 / .6) !important; }
.bg-orange-100 { background-color: var(--ai-sva-brand-100) !important; }
.bg-orange-200 { background-color: var(--ai-sva-brand-200) !important; }
.bg-orange-300 { background-color: var(--ai-sva-brand-300) !important; }
.bg-orange-400 { background-color: var(--ai-sva-brand-400) !important; }
.bg-orange-500 { background-color: var(--ai-sva-brand-500) !important; }
.bg-orange-600 { background-color: var(--ai-sva-brand-600) !important; }
.bg-orange-700 { background-color: var(--ai-sva-brand-700) !important; }
.bg-orange-800 { background-color: var(--ai-sva-brand-800) !important; }
.bg-orange-900 { background-color: var(--ai-sva-brand-900) !important; }

.text-orange-300 { color: var(--ai-sva-brand-300) !important; }
.text-orange-400 { color: var(--ai-sva-brand-400) !important; }
.text-orange-500 { color: var(--ai-sva-brand-500) !important; }
.text-orange-600 { color: var(--ai-sva-brand-600) !important; }
.text-orange-700 { color: var(--ai-sva-brand-700) !important; }
.text-orange-800 { color: var(--ai-sva-brand-800) !important; }
.text-orange-900 { color: var(--ai-sva-brand-900) !important; }

.border-orange-50 { border-color: var(--ai-sva-brand-50) !important; }
.border-orange-100 { border-color: var(--ai-sva-brand-100) !important; }
.border-orange-200 { border-color: var(--ai-sva-brand-200) !important; }
.border-orange-300 { border-color: var(--ai-sva-brand-300) !important; }
.border-orange-400 { border-color: var(--ai-sva-brand-400) !important; }
.border-orange-500 { border-color: var(--ai-sva-brand-500) !important; }
.border-orange-600 { border-color: var(--ai-sva-brand-600) !important; }
.border-orange-700 { border-color: var(--ai-sva-brand-700) !important; }

.ring-orange-200 { --tw-ring-color: var(--ai-sva-brand-200) !important; }
.ring-orange-400 { --tw-ring-color: var(--ai-sva-brand-400) !important; }
.ring-orange-500 { --tw-ring-color: var(--ai-sva-brand-500) !important; }
.focus\:ring-orange-200:focus { --tw-ring-color: var(--ai-sva-brand-200) !important; }
.focus\:ring-orange-500:focus { --tw-ring-color: var(--ai-sva-brand-500) !important; }
.focus\:border-orange-400:focus { border-color: var(--ai-sva-brand-400) !important; }
.focus\:border-orange-500:focus { border-color: var(--ai-sva-brand-500) !important; }

.hover\:bg-orange-50:hover { background-color: var(--ai-sva-brand-50) !important; }
.hover\:bg-orange-100:hover { background-color: var(--ai-sva-brand-100) !important; }
.hover\:bg-orange-300:hover { background-color: var(--ai-sva-brand-300) !important; }
.hover\:bg-orange-400:hover { background-color: var(--ai-sva-brand-400) !important; }
.hover\:bg-orange-500:hover { background-color: var(--ai-sva-brand-500) !important; }
.hover\:bg-orange-600:hover { background-color: var(--ai-sva-brand-600) !important; }
.hover\:bg-orange-700:hover { background-color: var(--ai-sva-brand-700) !important; }
.hover\:bg-orange-800:hover { background-color: var(--ai-sva-brand-800) !important; }
.hover\:text-orange-600:hover { color: var(--ai-sva-brand-600) !important; }
.hover\:text-orange-700:hover { color: var(--ai-sva-brand-700) !important; }
.hover\:text-orange-800:hover { color: var(--ai-sva-brand-800) !important; }
.hover\:text-orange-900:hover { color: var(--ai-sva-brand-900) !important; }
.hover\:border-orange-300:hover { border-color: var(--ai-sva-brand-300) !important; }
.hover\:border-orange-400:hover { border-color: var(--ai-sva-brand-400) !important; }

.group:hover .group-hover\:bg-orange-50 { background-color: var(--ai-sva-brand-50) !important; }
.group:hover .group-hover\:bg-orange-100 { background-color: var(--ai-sva-brand-100) !important; }
.group:hover .group-hover\:text-orange-600 { color: var(--ai-sva-brand-600) !important; }
.peer:checked ~ .peer-checked\:bg-orange-500 { background-color: var(--ai-sva-brand-500) !important; }
.peer:checked ~ .peer-checked\:bg-orange-700 { background-color: var(--ai-sva-brand-700) !important; }

.from-orange-50 {
  --tw-gradient-from: var(--ai-sva-brand-50) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(239 253 254 / 0) var(--tw-gradient-to-position) !important;
}
.from-orange-300 {
  --tw-gradient-from: var(--ai-sva-brand-300) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(108 235 240 / 0) var(--tw-gradient-to-position) !important;
}
.from-orange-500 {
  --tw-gradient-from: var(--ai-sva-brand-500) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(0 185 194 / 0) var(--tw-gradient-to-position) !important;
}
.via-orange-400 { --tw-gradient-via: var(--ai-sva-brand-400) var(--tw-gradient-via-position) !important; }
.to-orange-500 { --tw-gradient-to: var(--ai-sva-brand-500) var(--tw-gradient-to-position) !important; }
.to-orange-600 { --tw-gradient-to: var(--ai-sva-brand-600) var(--tw-gradient-to-position) !important; }

/* Shared chrome and primary controls. */
html body .site-header {
  background: linear-gradient(90deg, #000 0%, #005b60 100%) !important;
  box-shadow: 0 8px 18px rgb(0 185 194 / .13) !important;
}
html body #leftDrawer {
  background-image: linear-gradient(to bottom, #000, #006b71) !important;
}
html body main.container .btn-primary,
html body main.container .btn.pri {
  background: var(--ai-sva-brand-500) !important;
}
html body input[type="checkbox"]:checked,
html body input[type="radio"]:checked {
  background-color: var(--ai-sva-brand-500) !important;
  border-color: var(--ai-sva-brand-500) !important;
}

/* Inline legacy primary colors. Attribute selectors let old PHP templates use
   the central brand without rewriting their behavior or JavaScript hooks. */
[style*="background:#f97316"],
[style*="background: #f97316"],
[style*="background-color:#f97316"],
[style*="background-color: #f97316"] {
  background: var(--ai-sva-brand-500) !important;
}
[style*="color:#f97316"],
[style*="color: #f97316"] {
  color: var(--ai-sva-brand-500) !important;
}

/* Reusable page components with historical hard-coded orange styling. */
html body .aj-upgrade-btn,
html body main.container .billing-button {
  background-image: linear-gradient(135deg, #00b9c2, #00e1de) !important;
  box-shadow: 0 10px 26px rgb(0 185 194 / .24) !important;
}
html body .sv-primary { background: var(--ai-sva-brand-500) !important; }
html body .sv-secondary:hover { border-color: var(--ai-sva-brand-500) !important; color: var(--ai-sva-brand-700) !important; }
html body .sv-soft { background: var(--ai-sva-brand-50) !important; border-color: var(--ai-sva-brand-100) !important; }
html body .sv-avatar { background: var(--ai-sva-brand-50) !important; color: var(--ai-sva-brand-700) !important; }

html body .upload-zone:hover,
html body .record-button:hover,
html body .page-option:has(input:checked) { border-color: var(--ai-sva-brand-500) !important; }
html body .upload-zone:hover,
html body .page-option:has(input:checked) { background: var(--ai-sva-brand-50) !important; }
html body .page-option:has(input:checked) { box-shadow: 0 0 0 1px var(--ai-sva-brand-500) inset !important; }

html body .bill-preview-select,
html body .contact-review-confirm { background: var(--ai-sva-brand-500) !important; box-shadow: 0 10px 25px rgb(0 185 194 / .24) !important; }
html body .bill-avatar { background: var(--ai-sva-brand-50) !important; }
html body .bill-drop { background: var(--ai-sva-brand-50) !important; }
html body .bill-drop.drag { background: var(--ai-sva-brand-100) !important; }
html body .bill-review-card { background: linear-gradient(160deg, #fff 0%, var(--ai-sva-brand-50) 100%) !important; }
html body .bill-review-item:hover { background: var(--ai-sva-brand-50) !important; }
html body .bill-review-thumb { background: var(--ai-sva-brand-50) !important; }
html body .bill-preview-stage { background: linear-gradient(145deg, #f8fafc, var(--ai-sva-brand-50)) !important; }
html body .bill-preview-close:hover { background: var(--ai-sva-brand-100) !important; color: var(--ai-sva-brand-700) !important; }
html body .bill-preview-select:hover:not(:disabled) { background: var(--ai-sva-brand-600) !important; }
html body .bill-preview-nav:hover:not(:disabled) { background: var(--ai-sva-brand-700) !important; }
html body .contact-address-option:hover { border-color: var(--ai-sva-brand-200) !important; background: var(--ai-sva-brand-50) !important; }
html body .contact-address-option.selected { border-color: var(--ai-sva-brand-500) !important; background: var(--ai-sva-brand-50) !important; box-shadow: 0 0 0 3px rgb(0 185 194 / .1) !important; }
html body .contact-address-option.selected .contact-address-radio { border-color: var(--ai-sva-brand-500) !important; }
html body .contact-address-option.selected .contact-address-radio::after { background: var(--ai-sva-brand-500) !important; }

@media (prefers-reduced-motion: reduce) {
  .aj-upgrade-btn { animation: none !important; }
}