/**
 * Color lift — Appily-Ninetyfour
 * Soft orchard atmosphere across every page without rewriting page themes.
 * Coral · garden teal · marigold · bloom · leaf · sky
 */

/* Fixed color veil — tints opaque page skins (cart, checkout, etc.) */
body.sf-nav::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 55;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 42% at 8% 12%, rgba(224, 90, 43, 0.2), transparent 58%),
    radial-gradient(ellipse 48% 38% at 92% 18%, rgba(15, 122, 110, 0.18), transparent 55%),
    radial-gradient(ellipse 42% 32% at 72% 92%, rgba(232, 163, 23, 0.16), transparent 55%),
    radial-gradient(ellipse 30% 26% at 18% 78%, rgba(232, 90, 122, 0.1), transparent 52%),
    radial-gradient(ellipse 28% 24% at 55% 45%, rgba(61, 142, 201, 0.07), transparent 50%);
  mix-blend-mode: soft-light;
  opacity: 0.9;
}

@media (prefers-reduced-motion: reduce) {
  body.sf-nav::after { opacity: 0.7; }
}

/* Home already carries its own washes — keep the veil lighter */
body.saltflat::after {
  opacity: 0.45;
}

/* Keep dock above the veil */
.sf-dock { z-index: 80; }

/* —— Primary CTAs: warm coral gradient —— */
.btn--primary,
.btn-primary,
.a94-axis-btn--acid,
.a94-comb-btn--primary,
.a94-topo-btn--primary,
.a94-stub-btn--primary,
.a94-radar-btn--primary,
.a94-ladder-btn--primary,
.a94-seal-btn--primary,
.a94-slate-cta,
.a94-tel-submit,
.ks-btn--buy,
.bc-submit,
.a94-split-invert--solid,
.a94-split-invert.is-active,
.auth-split-tab.is-active,
.wt-checkout,
.dc-btn--primary,
.wb-submit,
.st-btn--buy,
.fp-shop,
.mf-btn--primary,
.pr-submit,
.id-btn--primary,
.rf-btn--primary,
.th-btn--primary {
  background: linear-gradient(135deg, #F06A38 0%, #E05A2B 48%, #C4471F 100%) !important;
  border-color: #D4522A !important;
  color: #FFFCF7 !important;
  box-shadow: 0 8px 22px rgba(224, 90, 43, 0.28) !important;
}

/* Secondary / teal accents on ghost borders */
.btn--ghost:hover,
.btn-ghost:hover,
.a94-axis-btn--ghost:hover,
.ks-btn:not(.ks-btn--buy):hover {
  border-color: var(--color-secondary, #0F7A6E) !important;
  color: var(--color-secondary, #0F7A6E) !important;
  background: rgba(15, 122, 110, 0.06) !important;
}

/* Kickers & labels — rotate garden accents */
.kicker,
.eyebrow,
.a94-topo-kicker,
.a94-comb-kicker,
.a94-split-kicker,
.a94-stub-kicker,
.sf-hero-kicker,
.wt-kicker,
.dc-kicker,
.wb-kicker,
.st-kicker,
.mf-kicker,
.pr-kicker,
.id-kicker,
.rf-kicker,
.th-kicker,
.fp-kicker {
  color: #0F7A6E !important;
}

/* Prices stay coral */
.a94-product-price,
.a94-shop-card-price,
.ks-price strong,
[class*="price"]:not(button):not(.a94-price-apply):not(.btn):not([type="submit"]) {
  color: #D4522A !important;
}

/* Panels: soft tinted edge instead of flat gray */
.panel,
.a94-comb-cell,
.a94-shop-filters,
.a94-help-chapter,
.a94-ledger-paper,
.bc-form-block,
.bc-aside,
.gateway-card,
.ks-controls {
  border-color: rgba(15, 122, 110, 0.18) !important;
  box-shadow:
    inset 3px 0 0 rgba(224, 90, 43, 0.45),
    0 12px 28px rgba(15, 122, 110, 0.06) !important;
}

/* Dark hero panes: teal with coral glow */
.a94-split-pane--left,
.a94-comb-hero,
.a94-topo-hero,
.a94-stub-marquee {
  background:
    radial-gradient(ellipse 70% 60% at 100% 0%, rgba(224, 90, 43, 0.35), transparent 55%),
    radial-gradient(ellipse 50% 45% at 0% 100%, rgba(232, 163, 23, 0.2), transparent 50%),
    linear-gradient(160deg, #0F7A6E 0%, #0B5F56 55%, #094A44 100%) !important;
  background-image:
    radial-gradient(ellipse 70% 60% at 100% 0%, rgba(224, 90, 43, 0.35), transparent 55%),
    radial-gradient(ellipse 50% 45% at 0% 100%, rgba(232, 163, 23, 0.2), transparent 50%),
    linear-gradient(160deg, #0F7A6E 0%, #0B5F56 55%, #094A44 100%) !important;
}

/* Saltflat home — richer sky & flare */
body.saltflat {
  background:
    radial-gradient(ellipse 60% 42% at 88% 8%, rgba(255, 79, 0, 0.18), transparent 52%),
    radial-gradient(ellipse 48% 36% at 8% 78%, rgba(15, 122, 110, 0.16), transparent 48%),
    radial-gradient(ellipse 40% 30% at 50% 100%, rgba(232, 163, 23, 0.14), transparent 50%),
    radial-gradient(ellipse 28% 22% at 70% 40%, rgba(232, 90, 122, 0.08), transparent 45%),
    linear-gradient(180deg, #D8EEE6 0%, #F0F7F2 42%, #E4F0E8 100%) !important;
}

.sf-btn--flare {
  background: linear-gradient(135deg, #FF6A2A 0%, #FF4F00 50%, #E04400 100%) !important;
  box-shadow: 0 10px 28px rgba(255, 79, 0, 0.32) !important;
}

.sf-hero-kicker {
  color: #0F7A6E !important;
}

/* Dock — colorful top hairline + warmer ticks */
.sf-dock {
  box-shadow:
    0 -1px 0 rgba(255, 79, 0, 0.45),
    0 -2px 0 rgba(15, 122, 110, 0.35),
    0 -12px 40px rgba(16, 21, 18, 0.18) !important;
  background:
    linear-gradient(90deg, rgba(255, 79, 0, 0.12), transparent 28%, transparent 72%, rgba(15, 122, 110, 0.14)),
    #101512 !important;
}

.sf-dock-ticks i.is-lit {
  background: linear-gradient(90deg, #FF4F00, #E8A317) !important;
}

.sf-dock-datum-mark {
  background: linear-gradient(145deg, #FF6A2A, #FF4F00) !important;
  box-shadow: 0 0 0 1px rgba(232, 163, 23, 0.35);
}

.sf-dock-cart em {
  background: linear-gradient(135deg, #FF6A2A, #E8A317) !important;
  color: #101512 !important;
}

/* Footer — slightly hotter copper / teal already present; nudge gold */
.a94-bearing {
  --bx-copper: #ff8a4a;
  --bx-copper-hot: #ffb07a;
  --bx-teal: #4ae0ad;
  --bx-gold: #ffd166;
}

/* Focus rings stay coral */
:focus-visible {
  outline-color: #E05A2B !important;
}