/* Coherence shared COLOR system. No font, size, spacing, radius or layout rules.
 * Source: coherencehealth.io src/index.css and the archived website design kit,
 * marketing/brand/design-system/colors_and_type.css (visual reference, Aug 25).
 * Existing page styles consume these namespaced tokens to avoid collisions.
 * Preserve status/chart colors and original image/SVG assets.
 */
:root {
  --co-paper-hsl: 30 20% 99%;
  --co-ink-hsl: 220 15% 15%;
  --co-white-hsl: 0 0% 100%;
  --co-teal-hsl: 168 45% 40%;
  --co-teal-dark-hsl: 168 45% 32%;
  --co-stone-hsl: 30 15% 95%;
  --co-muted-surface-hsl: 30 10% 94%;
  --co-muted-hsl: 220 10% 45%;
  --co-coral-hsl: 15 85% 60%;
  --co-coral-hover-hsl: 15 82% 54%;
  --co-peach-hsl: 25 100% 95%;
  --co-peach-ink-hsl: 15 85% 45%;
  --co-border-hsl: 30 15% 90%;
  --co-paper: hsl(var(--co-paper-hsl));
  --co-ink: hsl(var(--co-ink-hsl));
  --co-white: hsl(var(--co-white-hsl));
  --co-teal: hsl(var(--co-teal-hsl));
  --co-teal-dark: hsl(var(--co-teal-dark-hsl));
  --co-teal-deep: hsl(168 30% 22%);
  --co-stone: hsl(var(--co-stone-hsl));
  --co-muted-surface: hsl(var(--co-muted-surface-hsl));
  --co-muted: hsl(var(--co-muted-hsl));
  --co-coral: hsl(var(--co-coral-hsl));
  --co-coral-hover: hsl(var(--co-coral-hover-hsl));
  --co-peach: hsl(var(--co-peach-hsl));
  --co-peach-ink: hsl(var(--co-peach-ink-hsl));
  --co-border: hsl(var(--co-border-hsl));
  --co-teal-tint: hsl(168 30% 96%);
  --co-teal-soft: hsl(168 25% 91%);
  --co-teal-border: hsl(168 20% 75%);
  --co-footer: var(--co-stone);
  --co-footer-ink: var(--co-ink);
  --co-footer-muted: var(--co-muted);
  --co-placeholder: var(--co-muted);
}

/* Light grounds and warm footers from the original company website.
 * These selectors override legacy color-only page rules; their geometry stays
 * in the original page stylesheet. Gradients behind photographs remain intact.
 */
body { background-color: var(--co-paper); }
html:root .hero, html:root .final, html:root .page { background: var(--co-paper); }
.presenter { background-color: var(--co-stone); }
footer, footer.co-footer, .program-page footer {
  background-color: var(--co-footer);
  color: var(--co-footer-ink);
}
footer p, footer .small, footer.co-footer .small {
  color: var(--co-footer-muted);
}
footer a, footer p:last-child, footer.co-footer p:last-child, footer.co-footer a {
  color: var(--co-footer-ink);
}

/* Original website CTA treatment: coral with white labels (user preference). */
html body :is(.btn, .submit, button[type="submit"], .co-jump, .rca-waitlist-submit, .qz-btn, .application-actions .primary, .program-page .btn-join) {
  background-color: var(--co-coral);
  color: var(--co-white);
}
html body :is(.btn, .submit, button[type="submit"], .co-jump, .rca-waitlist-submit, .qz-btn, .application-actions .primary, .program-page .btn-join):hover {
  background-color: var(--co-coral-hover);
  color: var(--co-white);
}


/* Targeted follow-up: source website commit c3cdccc (April 15, 2026).
 * Header.tsx: bg-background, text-foreground, border-border.
 * Waitlist.tsx: from-primary/5 via-accent/5 to-highlight.
 * Join.tsx: bg-highlight + text-highlight-foreground for small highlights.
 * Adapt those existing roles to the funnel's banners without changing layout.
 */
html body .classbanner {
  background: var(--co-paper);
  color: var(--co-ink);
  box-shadow: inset 0 -1px 0 var(--co-border);
}
html body .classbanner .who { color: var(--co-muted); }
html body .classbanner .tag { color: var(--co-peach-ink); }
html body .classbanner .dot { background-color: var(--co-border); }
html body .classbanner svg { color: var(--co-teal); }

html body .wall {
  background-color: var(--co-paper);
  background-image: linear-gradient(135deg,
    hsl(var(--co-teal-hsl) / 0.05),
    hsl(var(--co-coral-hsl) / 0.05) 50%,
    var(--co-peach));
}
html body .wall h2 { color: var(--co-ink); }
html body .wall .after { color: var(--co-muted); }

html body .offer-strip {
  background: var(--co-coral);
  color: var(--co-white);
  box-shadow: 0 1px 2px hsl(0 0% 0% / 0.03);
}
html body :is(.co-securebar, .rca-bar) {
  background: var(--co-stone);
  color: var(--co-muted);
  box-shadow: inset 0 -1px 0 var(--co-border);
}
html body :is(.co-securebar, .rca-bar) span { color: var(--co-muted); }
html body :is(.co-securebar, .rca-bar) svg [stroke="#8FA79F"],
html body .rca-bar svg[stroke="#8FA79F"] { stroke: var(--co-teal); }
html body .co-securebar svg [fill="#8FA79F"] { fill: var(--co-teal); }

/* Selected banner colors, September 13: light teal opt-in, coral checkout,
 * peach RCA. The long-form class keeps its neutral header treatment.
 * .txt identifies the shared short opt-in banner, including /dsa-opt-in.
 */
html body .classbanner:has(.txt) {
  background: var(--co-teal-tint);
  color: var(--co-teal-dark);
}
html body .classbanner:has(.txt) svg { color: var(--co-teal-dark); }
html body .rca-bar { background: var(--co-peach); color: var(--co-peach-ink); }
html body .rca-bar span { color: var(--co-peach-ink); }
html body .rca-bar svg[stroke="#8FA79F"] { stroke: var(--co-peach-ink); }