/* Augen source palette: exact sRGB values, verified 2026-10-05.
   Keep typography, geometry and interaction. Original colors replace prior
   warm/lightened approximations. Header panels use original source alpha; final shade follows the backdrop. */
html:not([data-vl="ivory"]):not([data-vl="viridian"]) {
  --bg0: #0f1012;
  --bg1: #0f1012;
  --bg2: #1d1e20;
  --bg1-rgb: 15, 16, 18;
}
/* Dark-only review trial: neutral gray48 at16% alpha, previously10%.
   Approved light panel and row highlight remain neutral47% gray10%. */
:root {
  --augen-panel-surface: rgb(48 48 48 / 16%);
  --augen-panel-blur: 15px;
  --augen-panel-highlight: hsla(0,0%,47%,.1);
  --augen-panel-ink: #fff;
  --augen-panel-muted: #a5a5a5;
  --augen-panel-divider: hsla(0,0%,100%,.2);
}
html[data-vl="ivory"], [data-surface="light"], .on-light {
  --bg0: #f2f2f4;
  --bg1: #f2f2f4;
  --bg2: #efefef;
  --bg1-rgb: 242, 242, 244;
  --ink: #0f1012;
  --ink2: #5c5e62;
  --ink3: #626469;
  --line: rgba(15,16,18,.16);
  --line2: rgba(15,16,18,.3);
  --card: #1d1e20;
  --card-ink: #f2f2f4;
  --card-ink2: #a5a6a8;
  --btn-bg: #0f1012;
  --btn-fg: #f2f2f4;
  --btn-bg-h: #1d1e20;
  --glass: rgba(242,242,244,.78);
  --augen-panel-surface: hsla(0,0%,47%,.1);
  --augen-panel-blur: 20px;
  --augen-panel-highlight: hsla(0,0%,47%,.1);
  --augen-panel-ink: #0f1012;
  --augen-panel-muted: #5c5d5f;
  --augen-panel-divider: rgba(15,16,18,.2);
}
/* Existing inverse chapters in Ivory remain dark. */
html[data-vl="ivory"] :is([data-surface="light"], .on-light) {
  --bg0: #0f1012;
  --bg1: #0f1012;
  --bg2: #1d1e20;
  --bg1-rgb: 15, 16, 18;
  --ink: #fff;
  --ink2: #a5a6a8;
  --ink3: #909195;
  --line: rgba(255,255,255,.14);
  --line2: rgba(255,255,255,.28);
  --btn-bg: #f2f2f4;
  --btn-fg: #0f1012;
  --btn-bg-h: #fff;
  --glass: rgba(15,16,18,.78);
  --augen-panel-surface: rgb(48 48 48 / 16%);
  --augen-panel-blur: 15px;
  --augen-panel-highlight: hsla(0,0%,47%,.1);
  --augen-panel-ink: #fff;
  --augen-panel-muted: #a5a5a5;
  --augen-panel-divider: hsla(0,0%,100%,.2);
}

/* The reveal layers use the section's exact paint. Transparent overlapping
   descriptions otherwise show two sets of glyphs during the shared wipe. */
#s-services { --service-surface: var(--bg2); background: var(--service-surface); }
html:not([data-vl="ivory"]):not([data-vl="viridian"]) #s-services {
  --service-surface: var(--bg1); background: var(--service-surface);
}
#svc-panel[data-panel-switch] > div { background: var(--service-surface); }

/* Semantic accents, independent of status/selection/neutral tokens.
   Orange: start a studio project / contact. Blue: explore the product.
   Original values on both surfaces. Hover emphasis uses existing movement and
   underlines; do not wash the source hues out with lighter replacements. */
:root, html[data-vl="ivory"], [data-surface="light"], .on-light,
html[data-vl="ivory"] :is([data-surface="light"], .on-light) {
  --project-action: #ff5102;
  --project-action-hover: #ff5102;
  --product-action: #0071e3;
  --product-action-hover: #0071e3;
}
#process-story { --process-accent: var(--product-action); }
#process-story .process-story__step button[aria-current="true"] .process-story__number { color: var(--product-action); }

/* Explicit existing destinations; feedback, status and form controls keep
   their own semantics. Layout, typography and disclosure motion stay intact. */
:is(.top__cta, .contact__brief > .link,
    .price-route__actions a[href="#/talk"], .price-route__actions a[href="#/brief"]) {
  color: var(--project-action);
}
:is(.top__cta, .contact__brief > .link,
    .price-route__actions a[href="#/talk"], .price-route__actions a[href="#/brief"]):is(:hover,:focus-visible:where(:not([data-pointer-focus]))) {
  color: var(--project-action-hover);
}
.contact__direct .chan :is(.chan__v,.chan__arrow) { color: var(--project-action); }
.contact__direct .chan:is(:hover,:focus-visible:where(:not([data-pointer-focus]))) :is(.chan__v,.chan__arrow) { color: var(--project-action-hover); }

#top .nav-panel a:is([href="#/talk"],[href="#/brief"]) { color: var(--project-action); }
#top .nav-panel a:is([href="#/talk"],[href="#/brief"]):is(:hover,:focus-visible:where(:not([data-pointer-focus]))) { color: var(--project-action-hover); }
#top .nav-panel a:is([href="#/saas"],[href="#/saas/demo"],[href="#/saas/plans"],[href="#/saas/connect"]) { color: var(--product-action); }
#top .nav-panel a:is([href="#/saas"],[href="#/saas/demo"],[href="#/saas/plans"],[href="#/saas/connect"]):is(:hover,:focus-visible:where(:not([data-pointer-focus]))) { color: var(--product-action-hover); }
#top .nav-panel a:is([href="#/talk"],[href="#/brief"],[href="#/saas"],[href="#/saas/demo"],[href="#/saas/plans"],[href="#/saas/connect"]) i { opacity: 1; }

.product-teaser__copy > .eyebrow,
#page-saas .product-hero > div > .eyebrow,
.product-teaser .product-teaser__copy > .btn[href="#/saas"] { color: var(--product-action); }
.product-teaser .product-teaser__copy > .btn[href="#/saas"]:is(:hover,:focus-visible:where(:not([data-pointer-focus]))) { color: var(--product-action-hover); }
#page-saas .product-actions > .btn[href="#/saas/demo"] {
  color: var(--product-action);
  background: transparent;
  border-color: currentColor;
}
#page-saas .product-actions > .btn[href="#/saas/demo"]:is(:hover,:focus-visible:where(:not([data-pointer-focus]))) { color: var(--product-action-hover); }

/* c196: destination semantics carry across full menu, services, cases and
   account, not only the home-page CTA. Feedback and saved/status controls
   keep their own meaning. Product onboarding remains product-blue. */
html body a:is([href="#/talk"],[href^="#/talk/"],[href="#/brief"]):not([href*="/feedback/"]):not([data-offer-context="saas"]):not(.product-commercial__cta) {
  color: var(--project-action);
}
html body a:is([href="#/talk"],[href^="#/talk/"],[href="#/brief"]):not([href*="/feedback/"]):not([data-offer-context="saas"]):not(.product-commercial__cta):is(:hover,:focus-visible:where(:not([data-pointer-focus]))) {
  color: var(--project-action-hover);
}
html body a.btn:is([href="#/talk"],[href^="#/talk/"],[href="#/brief"]):not([href*="/feedback/"]) {
  background: transparent; border-color: currentColor;
}
html body :is(a.btn,a.link,a.product-commercial__cta,a.product-commercial__cta-wash):is([href="#/saas"],[href="#/saas/demo"],[href="#/saas/plans"],[href="#/saas/connect"]),
html body a[data-offer-context="saas"],
html body #ov-menu .menu-product__link,
html body .product-subnav--saas a[aria-current] { color: var(--product-action); }
html body :is(a.btn,a.link,a.product-commercial__cta,a.product-commercial__cta-wash):is([href="#/saas"],[href="#/saas/demo"],[href="#/saas/plans"],[href="#/saas/connect"]):is(:hover,:focus-visible:where(:not([data-pointer-focus]))),
html body a[data-offer-context="saas"]:is(:hover,:focus-visible:where(:not([data-pointer-focus]))),
html body #ov-menu .menu-product:is(:hover,:focus-visible:where(:not([data-pointer-focus]))) .menu-product__link { color: var(--product-action-hover); }
html body a.btn:is([href="#/saas"],[href="#/saas/demo"],[href="#/saas/plans"],[href="#/saas/connect"]),
html body a.btn[data-offer-context="saas"] { background: transparent; border-color: currentColor; }
html body #ov-menu .menu-product__link i { color: inherit; }
html body #page-saas .product-actions a.btn { color: var(--product-action); background: transparent; border-color: currentColor; }
html body #page-saas .product-actions a.btn:is(:hover,:focus-visible:where(:not([data-pointer-focus]))) { color: var(--product-action-hover); }