/*
 * ORBIT shared visual theme
 * -------------------------
 * Single source of truth for brand-level UI tokens and shared components.
 *
 * Change primary action colour HERE, not inside individual page stylesheets.
 * All reusable primary CTAs should include the `orbit-primary-action` class.
 * The legacy selector list below is intentionally temporary compatibility glue.
 */
:root {
  --orbit-ink: #07162f;
  --orbit-muted: #667286;

  /* Exact orange used by the homepage "Get My ORBIT Analysis" CTA. */
  --orbit-brand-orange-top: #f5782d;
  --orbit-brand-orange-mid: #ef6f1f;
  --orbit-brand-orange-bottom: #dc5e17;
  --orbit-brand-orange-hover-top: #fa7e31;
  --orbit-brand-orange-hover-mid: #f37425;
  --orbit-brand-orange-hover-bottom: #d95614;

  --orbit-brand-orange-gradient: linear-gradient(
    180deg,
    var(--orbit-brand-orange-top) 0%,
    var(--orbit-brand-orange-mid) 70%,
    var(--orbit-brand-orange-bottom) 100%
  );
  --orbit-brand-orange-gradient-hover: linear-gradient(
    180deg,
    var(--orbit-brand-orange-hover-top) 0%,
    var(--orbit-brand-orange-hover-mid) 70%,
    var(--orbit-brand-orange-hover-bottom) 100%
  );
  --orbit-brand-orange-border: rgba(175, 75, 21, 0.34);
  --orbit-brand-orange-border-hover: rgba(155, 60, 15, 0.42);
}

/* Shared primary-action component. Keep geometry in the page/component CSS. */
.orbit-primary-action {
  background: var(--orbit-brand-orange-gradient) !important;
  border-color: var(--orbit-brand-orange-border) !important;
  color: #fff !important;
}

.orbit-primary-action:hover,
.orbit-primary-action:focus-visible {
  background: var(--orbit-brand-orange-gradient-hover) !important;
  border-color: var(--orbit-brand-orange-border-hover) !important;
}

.orbit-primary-action:focus-visible {
  outline: 3px solid rgba(239, 111, 31, 0.22);
  outline-offset: 3px;
}

/*
 * Legacy adapters
 * ---------------
 * Existing pages still have old component names. These selectors keep their
 * colours consistent while we migrate markup to `.orbit-primary-action`.
 * New buttons should NOT add another colour rule; add the shared class instead.
 */
.hero-paid-cta,
.landing-scroll-cta,
.pricing-section.pricing-section-clean .pricing-cta,
.pricing-section.pricing-section-clean .button.pricing-cta,
.faq-order-primary,
.sample-report-order,
.purchase-submit,
.orbit-modal-submit,
.orbit-modal-done,
.method-header-cta,
.method-primary-cta,
.contact-submit,
.status-lookup-form button,
.status-primary-action,
.status-error a,
.orbit-404-primary {
  background: var(--orbit-brand-orange-gradient) !important;
  border-color: var(--orbit-brand-orange-border) !important;
  color: #fff !important;
}

.hero-paid-cta:hover,
.landing-scroll-cta:hover,
.pricing-section.pricing-section-clean .pricing-cta:hover,
.pricing-section.pricing-section-clean .button.pricing-cta:hover,
.faq-order-primary:hover,
.sample-report-order:hover,
.purchase-submit:hover,
.orbit-modal-submit:hover,
.orbit-modal-done:hover,
.method-header-cta:hover,
.method-primary-cta:hover,
.contact-submit:hover,
.status-lookup-form button:hover,
.status-primary-action:hover,
.status-error a:hover,
.orbit-404-primary:hover {
  background: var(--orbit-brand-orange-gradient-hover) !important;
  border-color: var(--orbit-brand-orange-border-hover) !important;
}