/* Seven soft spectrum accents, shared by public, private and offline pages.
   Keep the original landscape, artwork, glass geometry and rainbow button rims. */
body[data-page-colour="red"]    {--page-rgb:184,67,82; --page-ink:#8a2938}
body[data-page-colour="orange"] {--page-rgb:199,111,44;--page-ink:#884716}
body[data-page-colour="yellow"] {--page-rgb:179,146,30;--page-ink:#705b0c}
body[data-page-colour="green"]  {--page-rgb:58,143,96; --page-ink:#24633f}
body[data-page-colour="blue"]   {--page-rgb:55,126,185;--page-ink:#245c8b}
body[data-page-colour="indigo"] {--page-rgb:91,87,165; --page-ink:#484380}
body[data-page-colour="violet"] {--page-rgb:149,87,169;--page-ink:#754186}

html:root body[data-page-colour] {
  --accent:var(--page-ink);
  --accent2:rgba(var(--page-rgb),.3);
  --w-blue:var(--page-ink);
  --w-green:var(--page-ink);
  --line:rgba(var(--page-rgb),.24);
  --w-line:var(--line);
  --aero-glass:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.82) 48%,rgba(var(--page-rgb),.13));
  --aero-shadow:inset 0 1px 0 #fff,inset 0 -1px 2px rgba(var(--page-rgb),.14),0 10px 28px rgba(var(--page-rgb),.12);
  --button-glass:linear-gradient(180deg,rgba(255,255,255,.86),rgba(var(--page-rgb),.12) 48%,rgba(var(--page-rgb),.22) 51%,rgba(255,255,255,.72));
  --button-selected:linear-gradient(180deg,rgba(255,255,255,.8),rgba(var(--page-rgb),.32));
  background-image:linear-gradient(135deg,rgba(var(--page-rgb),.26),rgba(255,255,255,.16) 52%,rgba(var(--page-rgb),.17)),url('/assets/aero-vista.svg') !important;
}

/* Phones keep the same tinted sky on the fixed backdrop layer (see frutiger-aero.css). */
@media (max-width:760px) {
  html:root body[data-page-colour] {
    --archid-backdrop:linear-gradient(135deg,rgba(var(--page-rgb),.26),rgba(255,255,255,.16) 52%,rgba(var(--page-rgb),.17)),url('/assets/aero-vista.svg');
    background-image:none !important;
  }
}

/* Colour is carried by surfaces and small labels; reading text keeps its ink. */
html:root body[data-page-colour] :is(.site-header,.w-header) {
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(var(--page-rgb),.12) 49%,rgba(var(--page-rgb),.2) 51%,rgba(255,255,255,.91)) !important;
  border-bottom:2px solid rgba(var(--page-rgb),.5) !important;
}
html:root body[data-page-colour] :is(.eyebrow,.w-eyebrow,.archid-page-label,.pin-kicker) {color:var(--page-ink)}
html:root body[data-page-colour] :is(.featured-shell,.pin-wrap,.credits-wrap,.credit-group,.contact-card,.wonder-card,.pin-card,.archid-gallery-tile,.w-panel,.w-auth-side,.w-result,.cp-shell,.cp-card,.cp-pane,.iconography-study,.iconography-collection) {
  border-color:rgba(var(--page-rgb),.24);
}
html:root body[data-page-colour] .site-real-footer {
  background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(var(--page-rgb),.12));
}
html:root body[data-page-colour] :is(input,select,textarea,progress) {accent-color:var(--page-ink)}
html:root body[data-page-colour] :is(a,button,input,select,textarea,summary,[role="button"],[role="tab"]):focus-visible {
  outline:3px solid var(--page-ink) !important;
  outline-offset:3px;
}
body[data-page-colour] ::selection {background:rgba(var(--page-rgb),.24);color:#193f43}

/* Respect the visitor's system palette when colour differentiation is unavailable. */
@media (forced-colors:active) {
  html:root body[data-page-colour] {background:Canvas !important}
  html:root body[data-page-colour] :is(.site-header,.w-header,.site-real-footer) {background:Canvas !important;border-color:CanvasText !important}
  html:root body[data-page-colour] :is(.eyebrow,.w-eyebrow,.archid-page-label,.pin-kicker) {color:CanvasText}
  html:root body[data-page-colour] :is(a,button,input,select,textarea,summary,[role="button"],[role="tab"]):focus-visible {outline-color:Highlight !important}
}