/* Colour-only variation of Taste 10. Geometry, type and motion stay inherited.
   Palette: AIDEA design system tokens, revised 2026-11-12 (colour-tokens.css).
   Page is surface-page (sky-blue-50). Text and buttons use the 800+ steps;
   500s are fills only. Hero photography stays unchanged. */
:root {
  --bg: var(--surface-page);
  --paper: var(--surface-page);
  --ink: var(--text-body);
  --fg: var(--text-heading);
  --muted: var(--text-muted);
  --text-2: var(--text-muted);
  --line: var(--border-hairline);
  --line-strong: var(--charcoal-200);
  --blue: var(--text-brand);
  --accent: var(--action-primary);
  --accent-hover: var(--action-primary-hover);
  --glow: var(--sky-blue-300);
  /* Darkened brand shade for small links on pale surfaces. */
  --link-ink: var(--text-brand);
}
:is(.why-section,.outcomes-section,.test,.faq-section) {
  --tile: var(--sky-blue-100);
  --tile-light: var(--surface-card);
  --tile-blue: var(--sky-blue-200);
  --tile-sand: var(--surface-accent-soft);
}
.why-section,.outcomes-section,.outcomes-carousel,.faq-section {
  background-color: var(--surface-page);
}
/* Every CTA is --action-primary (sky-blue-800) with white text, per the semantic card. */
.btn-primary,.intro-primary,
.statement-footer .footer-invite-image .footer-contact {
  background-color: var(--action-primary);
  border-color: var(--action-primary);
  color: var(--text-on-brand);
}
.btn-primary:hover,.intro-primary:hover,
.statement-footer .footer-invite-image .footer-contact:hover {
  background-color: var(--action-primary-hover);
  border-color: var(--action-primary-hover);
  color: var(--text-on-brand);
}
/* A raised button surface: light top edge and a crisp lower bevel, no halo. */
:is(.btn,.footer-contact),
:is(.btn,.footer-contact):is(:hover,:focus-visible) {
  box-shadow: inset 0 1px 0 #ffffff66, 0 3px 0 var(--sky-blue-900), 0 5px 7px -5px #2d2d2d66 !important;
}
:is(.btn,.footer-contact)::before,
:is(.btn,.footer-contact)::after,
:is(.btn,.footer-contact):is(:hover,:focus-visible)::before,
:is(.btn,.footer-contact):is(:hover,:focus-visible)::after {
  content: none;
  display: none;
  animation: none;
}
/* More opaque white while retaining the existing translucent navbar. */
.nav-pill {
  background-color: rgba(255,255,255,.68);
  border-color: rgba(255,255,255,.88);
}
.text-link,.text-link:hover,.faq-plus,
.faq-item summary:hover,.faq-item[open] summary { color: var(--link-ink); }
a:focus-visible,button:focus-visible,.faq-item summary:focus-visible { outline-color: var(--link-ink); }
::selection { background-color: var(--yellow-300); color: var(--charcoal-900); }
/* Sky-blue panels dominate; coral supports the bottleneck/late-work moments. */
.why-card { background-color: var(--sky-blue-100); }
.why-card-two { background-color: var(--coral-100); }
.why-card-three { background-color: var(--cream-50); }
.why-number,.approval-note>span,.paper-top,.quote-total>span,
.paper-status,.thought,.check-row,.checked>span,.manual-sheet small { color: var(--text-muted); }
.approval-note { background-color: #ffffffd9; }
.approval-note b { color: var(--text-alert); }
.approval-line { background-color: var(--sky-blue-300); }
#why .approval-art { background-image: radial-gradient(ellipse at 75% 50%, #9fd3f144, transparent 67%); }
#why .approval-you {
  background-image: radial-gradient(circle at 32% 22%, #fff, var(--sky-blue-100) 65%, var(--sky-blue-200));
  border-color: var(--cream-0);
  box-shadow: inset 0 0 8px #fff, 0 10px 28px #2e8cc414, 0 0 50px #5db4e833;
}
#why .approval-you::before { border-color: #5db4e838; }
.quote-paper,.sheet-front { background-color: var(--surface-card); }
.paper-dot { background-color: var(--coral-500); }
.paper-rule { background-color: var(--cream-200); }
.quote-total { border-color: var(--border-soft); }
.paper-status { background-color: var(--surface-alert-soft); border-color: var(--coral-300); }
.late-clock { background-color: var(--surface-inverse); color: var(--text-on-inverse); border-color: var(--charcoal-600); }
.late-clock>span { color: var(--warm-yellow); }
.thought { background-color: var(--surface-card); border-color: var(--border-soft); }
.sheet-back { background-color: var(--cream-200); color: var(--text-muted); }
.check-row b { border-color: var(--charcoal-200); }
.checked b { background-color: var(--sky-blue-200); border-color: var(--sky-blue-300); color: var(--text-body); }
.manual-progress { background-color: var(--cream-200); }
.manual-progress>span { background-color: var(--sky-blue-500); }
.draft-stamp { background-color: var(--yellow-300); color: var(--text-body); border-color: var(--yellow-600); }
.outcome-copy,.outcomes-viewport { background-color: var(--sky-blue-100); }
.outcome-dots button span { background-color: var(--charcoal-200); }
.outcome-dots button[aria-current=true] span { background-color: var(--link-ink); }
.outcome-arrows button { background-color: var(--sky-blue-200); color: var(--text-body); }
.outcome-arrows button:hover { background-color: var(--action-primary); color: var(--text-on-brand); }
#test { background-color: var(--surface-inverse); color: var(--text-on-inverse); }
#test .section-head h2,body #test .lead { color: var(--text-on-inverse); }
#test .includes li:nth-child(2) { background-color: var(--yellow-100); }
#test .includes li:nth-child(3) { background-color: var(--sky-blue-200); }
#test .includes li:nth-child(4) { background-color: var(--coral-100); }
.faq-item { background-color: var(--surface-card); }
.faq-item[open] { background-color: var(--sky-blue-100); }
.footer-base { background-color: var(--surface-page); }
.footer-wordmark { color: var(--text-body); }