/* REV-20260916-050: use the complete Ocean and Coral palette beyond chrome. */
:root {
  --zarir-bg: #F2F4F2;
  --zarir-surface: #FFFFFF;
  --zarir-text: #24313A;
  --zarir-ocean: #1F4B66;
  --zarir-turquoise: #438A94;
  --zarir-coral: #D46B52;
}

/* Editorial surfaces and section boundaries. */
body,
.inner-page,
.strict-section,
.section,
.reference-section,
.product-discovery,
.workflow-walkthrough,
.context-trust,
.media-section,
.video-band {
  color: var(--zarir-text);
  background-color: var(--zarir-bg);
}

.strict-section:nth-of-type(even),
.feature-section:nth-of-type(even),
.detail-section:nth-of-type(even) {
  background-color: var(--zarir-surface);
}

/* Text hierarchy, rules, links, and focus use all three chromatic tones. */
h1, h2, h3, .section-intro p, .feature-copy p, .split-note-copy p,
.contact-note-copy p, .detail-copy-block p, .product-detail-panel p {
  color: var(--zarir-text);
}

a,
.quiet-link,
.breadcrumbs a,
.nav-menu a small,
.panel-index,
.strict-label,
.strict-supporting-line {
  color: var(--zarir-turquoise);
}

.kicker,
.kicker-light,
.section-intro .kicker,
.page-hero-heading .kicker {
  color: var(--zarir-ocean);
}

.kicker-mark,
.main-nav a:after,
.quiet-link,
.feature-media,
.split-note-media,
.product-detail-panel,
.detail-panel,
.strict-final-cta {
  border-color: var(--zarir-turquoise);
}

.kicker-mark,
.main-nav a:after,
.strict-section-head:after,
.section-intro:after {
  background: linear-gradient(90deg, var(--zarir-ocean), var(--zarir-turquoise), var(--zarir-coral));
}

*:focus-visible {
  outline-color: var(--zarir-coral);
  outline-offset: 3px;
}

/* Coral is a deliberate action/status accent, not a replacement for body text. */
.topbar-cta,
.strict-final-cta .button,
.contact-card .button,
.detail-cta .button {
  background: var(--zarir-coral);
  border-color: var(--zarir-coral);
  color: var(--zarir-surface);
}

.topbar-cta:hover,
.topbar-cta:focus-visible,
.strict-final-cta .button:hover,
.strict-final-cta .button:focus-visible,
.contact-card .button:hover,
.contact-card .button:focus-visible,
.detail-cta .button:hover,
.detail-cta .button:focus-visible {
  background: var(--zarir-turquoise);
  border-color: var(--zarir-turquoise);
}

.button:not(.topbar-cta):not(.button-light) {
  background: var(--zarir-ocean);
  border-color: var(--zarir-ocean);
}

.button:not(.topbar-cta):not(.button-light):hover,
.button:not(.topbar-cta):not(.button-light):focus-visible {
  background: var(--zarir-turquoise);
  border-color: var(--zarir-turquoise);
}

/* Product, problem, workflow, and trust content carry visible color roles. */
.product-card,
.problem-card,
.trust-block,
.capability-card,
.principle-card,
.media-card,
.process-card,
.domain-card,
.insight-card,
.product-detail-panel,
.detail-panel {
  background: var(--zarir-surface);
  border-color: rgba(36, 49, 58, .18);
}

.product-card,
.domain-card,
.process-card,
.insight-card {
  border-top-color: var(--zarir-turquoise);
}

.problem-card,
.trust-block,
.capability-card-accent {
  border-top-color: var(--zarir-coral);
}

.product-card:hover,
.product-card:focus-within,
.problem-card:hover,
.problem-card:focus-within,
.trust-block:hover,
.capability-card:hover,
.media-card:hover {
  border-color: var(--zarir-turquoise);
  box-shadow: 0 18px 38px rgba(31, 75, 102, .12);
}

.product-card .kicker-mark,
.problem-card .kicker-mark,
.trust-block .kicker-mark {
  background: linear-gradient(90deg, var(--zarir-turquoise), var(--zarir-coral));
}

.strict-workflow-step,
.delivery-list li,
.reference-notes div,
.detail-list li {
  border-color: rgba(67, 138, 148, .32);
}

.strict-workflow-step::after,
.principle-card>b,
.check-list li:before,
.delivery-list li>span {
  color: var(--zarir-coral);
}

/* Media and video rails use turquoise framing with a coral endpoint. */
.page-hero-media,
.feature-media,
.split-note-media,
.strict-hero-visual img,
.video-band-frame,
.footer-reel-frame,
.reference-image,
.subpanel-media {
  background: var(--zarir-surface);
  border-color: rgba(67, 138, 148, .35);
}

.page-hero-media figcaption,
.feature-media figcaption,
.split-note-media figcaption,
.video-band-frame figcaption,
.footer-reel-frame figcaption {
  border-top-color: var(--zarir-coral);
  background: linear-gradient(135deg, var(--zarir-ocean), var(--zarir-turquoise));
}

.video-band-frame:after,
.footer-reel-frame:after,
.reference-image:after {
  background: linear-gradient(transparent, rgba(31, 75, 102, .72));
}

.page-hero-heading {
  background: linear-gradient(135deg, var(--zarir-ocean), var(--zarir-turquoise));
  border-inline-start-color: var(--zarir-coral);
}

.page-hero-copy {
  border-inline-start-color: var(--zarir-coral);
}

.intro-gate,
.intro-video {
  background: var(--zarir-ocean);
}

.intro-scrim {
  background: linear-gradient(90deg, rgba(31, 75, 102, .9), rgba(67, 138, 148, .52) 54%, rgba(31, 75, 102, .25)), linear-gradient(0deg, rgba(31, 75, 102, .8), transparent 70%);
}

.intro-brand {
  border: 2px solid var(--zarir-coral);
}

.site-footer {
  background: var(--zarir-bg);
  border-top-color: var(--zarir-turquoise);
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; }
}