/* SAIS site-wide palette. Change the colors here to recolor every main page.
   Keep --cd-orange and --cd-violet as #RRGGBB: sais-palettes.js reads them
   to recolor the existing illustration assets automatically. */
:root {
  --cd-bg: #e8e8e5;
  --cd-paper: #f8f8f5;
  --cd-ink: #090909;
  --cd-line: rgba(9, 9, 9, .17);

  --cd-orange: #ad3865;
  --cd-orange-deep: #85294d;
  --cd-violet: #3e84a4;
  --cd-secondary-deep: #286783;
  --cd-soft-accent: #e2a0b7;
  --cd-footer-link: #f0a6bf;
  --cd-motion-blue: #3882a2;
  --cd-motion-wine: #b02258;

  /* Illustrations keep their original colors until the filter is installed. */
  --cd-media-filter: none;
}

/* Keep every exposed page surface in the same warm milk tone. */
html[data-theme="light"],
html[data-theme="light"] body.sais-layout-home,
html[data-theme="light"] body.sais-layout-page,
html[data-theme="light"] body.sais-layout-home .topbar,
html[data-theme="light"] body.sais-layout-page .topbar,
html[data-theme="light"] body.sais-layout-home .topbar.is-stuck,
html[data-theme="light"] body.sais-layout-page .topbar.is-stuck {
  background-color: var(--cd-bg);
}

/* The hero video already contains the site palette; never recolor it again. */
body.sais-layout-home .hero-art__video[data-brand-hero],
body.sais-layout-page .page-head__video[data-brand-hero] { filter: none; }

/* Hero cut-outs meet the animated field directly, without a hairline frame. */
body.sais-layout-home :is(.cosmos-hero__layout, .hero-title-panel, .hero-action-panel, .hero-art),
body.sais-layout-page :is(.page-head, .page-head__inner, .page-head__aside, .page-head__motion),
.brand-motion {
  border: 0;
  outline: 0;
  box-shadow: none;
}

/* A legacy light-theme rule hard-codes the hero eyebrow color. */
html[data-theme="light"] .sais-layout-home .hero-title-panel .cosmos-kicker {
  color: var(--cd-orange-deep);
}

.sais-palette-filter {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}