/* The page's wall and exposed text. Artwork and card palettes stay local. */
html[data-theme] {
  --page-background: #000000;
  --page-background-rgb: 0 0 0;
  --page-text: #ffffff;
  --page-muted: #ffffffa3;
  color-scheme: dark;
  background-color: var(--page-background);
}

html[data-theme="light"] {
  --page-background: #f3f0e9;
  --page-background-rgb: 243 240 233;
  --page-text: #171715;
  --page-muted: #65625c;
  color-scheme: light;
}

html[data-theme] body,
html[data-theme] .page-wrapper {
  background-color: var(--page-background);
  color: var(--page-text);
}

html[data-theme] .card-section {
  background-color: var(--page-background);
}

html[data-theme] .home-about-block {
  color: #fff;
  color-scheme: dark;
}

html[data-theme] .story .container-default {
  color-scheme: dark;
}

html[data-theme] .home-hero-intro :is(.clip, .text-color-white),
html[data-theme] .process_item-description,
html[data-theme] .footer-section .text-block,
html[data-theme] .project-title-container {
  color: var(--page-text);
}

html[data-theme] .process_item-description .text-color-secondary.text-size-medium {
  color: var(--page-muted);
}

/* Every stop uses the wall's RGB, including the transparent edge. */
html[data-theme] .landing-hero .hero-blur::after {
  background: linear-gradient(to bottom,
    rgb(var(--page-background-rgb) / 0),
    rgb(var(--page-background-rgb) / .05) 24%,
    rgb(var(--page-background-rgb) / .2) 43%,
    rgb(var(--page-background-rgb) / .5) 65%,
    rgb(var(--page-background-rgb) / .85) 82%,
    var(--page-background) 94%);
}

html[data-theme] .process_overlay-top {
  background-image: linear-gradient(180deg, var(--page-background), rgb(var(--page-background-rgb) / 0));
}

html[data-theme] .process_overlay-bottom {
  background-image: linear-gradient(0deg, var(--page-background), rgb(var(--page-background-rgb) / 0));
}