/* Theme palettes: light (default) and brand (blue). */

:root {
  --theme-duration: 520ms;
  --theme-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --theme-transition:
    background-color var(--theme-duration) var(--theme-ease),
    color var(--theme-duration) var(--theme-ease),
    border-color var(--theme-duration) var(--theme-ease),
    fill var(--theme-duration) var(--theme-ease),
    filter var(--theme-duration) var(--theme-ease);
}

html,
html[data-theme="light"] {
  --theme-background: var(--color-brand-background);
  --theme-text: var(--color-brand-text);
  --theme-text-faded: var(--color-brand-text-faded);
  --theme-border: var(--color-border-main);
  --theme-button-bg: var(--color-brand-primary);
  --theme-button-text: var(--color-neutral-25);
  --theme-toggle-track: #eaecf0;
  --theme-toggle-thumb: var(--color-white);
  color-scheme: light;
}

html[data-theme="brand"] {
  --theme-background: var(--color-brand-primary);
  --theme-text: var(--color-brand-background);
  --theme-text-faded: color-mix(in srgb, var(--color-brand-background) 80%, transparent);
  --theme-border: var(--color-brand-background);
  --theme-button-bg: var(--color-brand-background);
  --theme-button-text: var(--color-brand-primary);
  --theme-toggle-track: color-mix(in srgb, var(--color-brand-background) 25%, transparent);
  --theme-toggle-thumb: var(--color-brand-background);
  color-scheme: dark;
}

/* Keep html/body/page/nav/sections on the same bg clock as each other */
html {
  background-color: var(--theme-background);
  color: var(--theme-text);
  transition: var(--theme-transition);
}

/*
  Grain overlay — no mix-blend-mode (that hid text in Cursor’s browser preview).
  Low opacity so type stays readable underneath.
*/
html::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  background-image: url("../assets/textures/grain.png");
  background-repeat: repeat;
  background-size: 280px 280px;
  opacity: 0.18;
  /* Own compositor layer so grain doesn’t dirty paint on scroll */
  transform: translateZ(0);
  contain: paint;
}

html[data-theme="brand"]::before {
  opacity: 0.22;
}

.hero_wrap,
.intro_wrap,
.about_wrap,
.teams_wrap,
.interlude_wrap,
.help_wrap,
.results_wrap,
.audience_wrap,
.site_footer {
  transition: var(--theme-transition);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --theme-duration: 0ms;
  }
}