/*
 * Opt-in color palette lab.
 * Activated automatically on staging and by ?palette-lab=1 in local reviews.
 */

html[data-palette-theme="current"] {
  --lab-ink: #263247;
  --lab-deep: #151d2b;
  --lab-muted: #637084;
  --lab-soft: #f6f8fb;
  --lab-warm: #fff7e8;
  --lab-hero: #a4cbe6;
  --lab-hero-text: #101820;
  --lab-primary: #c9364a;
  --lab-on-primary: #ffffff;
  --lab-cta: #81bea6;
  --lab-on-cta: #151d2b;
  --lab-accent: #d04752;
  --lab-secondary: #edc258;
  --lab-tertiary: #df8d57;
  --lab-link: #42699c;
  --lab-overlay-strong: rgba(21, 29, 43, 0.76);
  --lab-overlay-soft: rgba(21, 29, 43, 0.18);
}

html[data-palette-theme="sky-garden"] {
  --lab-ink: #203047;
  --lab-deep: #17263a;
  --lab-muted: #53657b;
  --lab-soft: #edf5fa;
  --lab-warm: #fff8e6;
  --lab-hero: #a4cbe6;
  --lab-hero-text: #17263a;
  --lab-primary: #42699c;
  --lab-on-primary: #ffffff;
  --lab-cta: #81bea6;
  --lab-on-cta: #17263a;
  --lab-accent: #d04752;
  --lab-secondary: #edc258;
  --lab-tertiary: #df8d57;
  --lab-link: #365f91;
  --lab-overlay-strong: rgba(23, 38, 58, 0.76);
  --lab-overlay-soft: rgba(23, 38, 58, 0.16);
}

html[data-palette-theme="sunny-play"] {
  --lab-ink: #292b3d;
  --lab-deep: #24253a;
  --lab-muted: #626276;
  --lab-soft: #fff5cf;
  --lab-warm: #fff9e8;
  --lab-hero: #edc258;
  --lab-hero-text: #24253a;
  --lab-primary: #b63d4a;
  --lab-on-primary: #ffffff;
  --lab-cta: #81bea6;
  --lab-on-cta: #202c2a;
  --lab-accent: #d04752;
  --lab-secondary: #a4cbe6;
  --lab-tertiary: #df8d57;
  --lab-link: #8b3542;
  --lab-overlay-strong: rgba(36, 37, 58, 0.78);
  --lab-overlay-soft: rgba(36, 37, 58, 0.18);
}

html[data-palette-theme="creative-studio"] {
  --lab-ink: #302c45;
  --lab-deep: #25223b;
  --lab-muted: #68617a;
  --lab-soft: #f5f0fa;
  --lab-warm: #fff2f7;
  --lab-hero: #e4abc5;
  --lab-hero-text: #25223b;
  --lab-primary: #6d548b;
  --lab-on-primary: #ffffff;
  --lab-cta: #81bea6;
  --lab-on-cta: #202c2a;
  --lab-accent: #7b61a3;
  --lab-secondary: #edc258;
  --lab-tertiary: #859dc9;
  --lab-link: #5f4b82;
  --lab-overlay-strong: rgba(37, 34, 59, 0.78);
  --lab-overlay-soft: rgba(37, 34, 59, 0.18);
}

html[data-palette-theme="lakeside-learning"] {
  --lab-ink: #26334f;
  --lab-deep: #1d2942;
  --lab-muted: #5c6981;
  --lab-soft: #eef3fa;
  --lab-warm: #fff7e7;
  --lab-hero: #d9e4f3;
  --lab-hero-text: #24314f;
  --lab-primary: #5b6fa5;
  --lab-on-primary: #ffffff;
  --lab-cta: #b43d49;
  --lab-on-cta: #ffffff;
  --lab-accent: #859dc9;
  --lab-secondary: #edc258;
  --lab-tertiary: #df8d57;
  --lab-link: #4b6095;
  --lab-overlay-strong: rgba(29, 41, 66, 0.78);
  --lab-overlay-soft: rgba(29, 41, 66, 0.18);
}

html[data-palette-theme="berry-bloom"] {
  --lab-ink: #372b3d;
  --lab-deep: #2a2132;
  --lab-muted: #6c6070;
  --lab-soft: #fbf1f5;
  --lab-warm: #fff8e8;
  --lab-hero: #f3d8e4;
  --lab-hero-text: #34243c;
  --lab-primary: #78527d;
  --lab-on-primary: #ffffff;
  --lab-cta: #2f7867;
  --lab-on-cta: #ffffff;
  --lab-accent: #d04752;
  --lab-secondary: #edc258;
  --lab-tertiary: #df8d57;
  --lab-link: #68456e;
  --lab-overlay-strong: rgba(42, 33, 50, 0.78);
  --lab-overlay-soft: rgba(42, 33, 50, 0.18);
}

html[data-palette-theme="fresh-museum"] {
  --lab-ink: #17343b;
  --lab-deep: #102c32;
  --lab-muted: #526d72;
  --lab-soft: #edf8f5;
  --lab-warm: #fff8dc;
  --lab-hero: #bfe4dc;
  --lab-hero-text: #102c32;
  --lab-primary: #16756d;
  --lab-on-primary: #ffffff;
  --lab-cta: #c84952;
  --lab-on-cta: #ffffff;
  --lab-accent: #16756d;
  --lab-secondary: #f2c94c;
  --lab-tertiary: #e65c57;
  --lab-link: #11655f;
  --lab-overlay-strong: rgba(16, 44, 50, 0.78);
  --lab-overlay-soft: rgba(16, 44, 50, 0.16);
}

html[data-palette-theme="carnegie-modern"] {
  --lab-ink: #2d3136;
  --lab-deep: #22272c;
  --lab-muted: #606b6d;
  --lab-soft: #f1f5f1;
  --lab-warm: #fff6e8;
  --lab-hero: #d8e2d5;
  --lab-hero-text: #22272c;
  --lab-primary: #9d3f32;
  --lab-on-primary: #ffffff;
  --lab-cta: #416f5f;
  --lab-on-cta: #ffffff;
  --lab-accent: #9d3f32;
  --lab-secondary: #c39c43;
  --lab-tertiary: #718b7d;
  --lab-link: #7f3228;
  --lab-overlay-strong: rgba(34, 39, 44, 0.78);
  --lab-overlay-soft: rgba(34, 39, 44, 0.18);
}

html[data-palette-theme="wonder-workshop"] {
  --lab-ink: #19333a;
  --lab-deep: #122b33;
  --lab-muted: #587078;
  --lab-soft: #eef9f7;
  --lab-warm: #fff6db;
  --lab-hero: #d7f0eb;
  --lab-hero-text: #15323a;
  --lab-primary: #ad3f49;
  --lab-on-primary: #ffffff;
  --lab-cta: #326f82;
  --lab-on-cta: #ffffff;
  --lab-accent: #e75e58;
  --lab-secondary: #f2c84b;
  --lab-tertiary: #e6854d;
  --lab-link: #276275;
  --lab-overlay-strong: rgba(18, 43, 51, 0.8);
  --lab-overlay-soft: rgba(18, 43, 51, 0.17);
}

html[data-palette-theme="great-lakes"] {
  --lab-ink: #16354a;
  --lab-deep: #0f2b3e;
  --lab-muted: #567184;
  --lab-soft: #eef7fa;
  --lab-warm: #fff7df;
  --lab-hero: #d5ebf3;
  --lab-hero-text: #12364b;
  --lab-primary: #23627d;
  --lab-on-primary: #ffffff;
  --lab-cta: #a94335;
  --lab-on-cta: #ffffff;
  --lab-accent: #2b7898;
  --lab-secondary: #edc258;
  --lab-tertiary: #df8d57;
  --lab-link: #1f5870;
  --lab-overlay-strong: rgba(15, 43, 62, 0.8);
  --lab-overlay-soft: rgba(15, 43, 62, 0.17);
}

html[data-palette-theme="storybook-modern"] {
  --lab-ink: #3a2d3c;
  --lab-deep: #2d2432;
  --lab-muted: #706274;
  --lab-soft: #fbf2f1;
  --lab-warm: #fff8e9;
  --lab-hero: #f6d6c4;
  --lab-hero-text: #3a2638;
  --lab-primary: #6a4b78;
  --lab-on-primary: #ffffff;
  --lab-cta: #31776b;
  --lab-on-cta: #ffffff;
  --lab-accent: #bf4a55;
  --lab-secondary: #edc258;
  --lab-tertiary: #df8d57;
  --lab-link: #5d416a;
  --lab-overlay-strong: rgba(45, 36, 50, 0.79);
  --lab-overlay-soft: rgba(45, 36, 50, 0.17);
}

html[data-palette-lab="true"][data-palette-theme] {
  --ink: var(--lab-ink);
  --deep: var(--lab-deep);
  --muted: var(--lab-muted);
  --soft: var(--lab-soft);
  --cream: var(--lab-warm);
  --coral: var(--lab-accent);
  --coral-text: var(--lab-link);
  --orange: var(--lab-tertiary);
  --gold: var(--lab-secondary);
  --mint: var(--lab-cta);
  --sky: var(--lab-hero);
  --label-blue: var(--lab-link);
  --brand-green: var(--lab-cta);
  --brand-light-blue: var(--lab-hero);
  --focus: var(--lab-deep);
  --focus-glow: color-mix(in srgb, var(--lab-secondary) 72%, transparent);
  --line: color-mix(in srgb, var(--lab-ink) 14%, transparent);
  --shadow: 0 18px 45px color-mix(in srgb, var(--lab-deep) 15%, transparent);
  --lift: 0 24px 70px color-mix(in srgb, var(--lab-deep) 21%, transparent);
}

html[data-palette-lab="true"][data-palette-theme] body {
  color: var(--lab-ink);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--lab-soft) 88%, white), transparent 380px),
    #ffffff;
}

html[data-palette-lab="true"][data-palette-theme] .site-header {
  background: rgba(255, 255, 255, 0.98);
  border-bottom-color: color-mix(in srgb, var(--lab-ink) 12%, transparent);
  box-shadow: 0 8px 28px color-mix(in srgb, var(--lab-deep) 9%, transparent);
}

html[data-palette-lab="true"][data-palette-theme] .site-nav a[aria-current="page"],
html[data-palette-lab="true"][data-palette-theme] .text-link,
html[data-palette-lab="true"][data-palette-theme] .policy-content a {
  color: var(--lab-link);
}

html[data-palette-lab="true"][data-palette-theme] .button:not(.button-light):not(.button-donate) {
  color: var(--lab-on-primary);
  background: var(--lab-primary);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--lab-primary) 26%, transparent);
}

html[data-palette-lab="true"][data-palette-theme] .button:not(.button-light):not(.button-donate):hover {
  background: color-mix(in srgb, var(--lab-primary) 88%, black);
}

html[data-palette-lab="true"][data-palette-theme] .button-donate,
html[data-palette-lab="true"][data-palette-theme] .sticky-donate,
html[data-palette-lab="true"][data-palette-theme] .final-action-primary {
  color: var(--lab-on-cta);
  background: var(--lab-cta);
  box-shadow: 0 12px 26px color-mix(in srgb, var(--lab-cta) 30%, transparent);
}

html[data-palette-lab="true"][data-palette-theme] .button-donate:hover,
html[data-palette-lab="true"][data-palette-theme] .sticky-donate:hover,
html[data-palette-lab="true"][data-palette-theme] .final-action-primary:hover {
  color: var(--lab-on-cta);
  background: color-mix(in srgb, var(--lab-cta) 88%, black);
}

html[data-palette-lab="true"][data-palette-theme] .home-hero-stacked {
  color: var(--lab-hero-text);
  background: var(--lab-hero);
}

html[data-palette-lab="true"][data-palette-theme] .home-hero-stacked__media {
  background: color-mix(in srgb, var(--lab-hero) 74%, white);
}

html[data-palette-lab="true"][data-palette-theme] .home-hero-stacked__action h1,
html[data-palette-lab="true"][data-palette-theme] .home-hero-stacked__action p,
html[data-palette-lab="true"][data-palette-theme] .home-hero-stacked__action .eyebrow {
  color: var(--lab-hero-text);
}

html[data-palette-lab="true"][data-palette-theme] .hero-overlay,
html[data-palette-lab="true"][data-palette-theme] .contact-hero-overlay {
  background:
    linear-gradient(90deg, var(--lab-overlay-strong), color-mix(in srgb, var(--lab-overlay-strong) 46%, transparent) 52%, transparent),
    linear-gradient(0deg, color-mix(in srgb, var(--lab-overlay-strong) 74%, transparent), transparent 60%);
}

html[data-palette-lab="true"][data-palette-theme] .intro-band,
html[data-palette-lab="true"][data-palette-theme] .dream-band,
html[data-palette-lab="true"][data-palette-theme] .timeline-band {
  background: var(--lab-warm);
}

html[data-palette-lab="true"][data-palette-theme] .stats-band,
html[data-palette-lab="true"][data-palette-theme] .support-band,
html[data-palette-lab="true"][data-palette-theme] .why-donate,
html[data-palette-lab="true"][data-palette-theme] .sponsorship-band,
html[data-palette-lab="true"][data-palette-theme] .board-band,
html[data-palette-lab="true"][data-palette-theme] .updates-section {
  background: var(--lab-soft);
}

html[data-palette-lab="true"][data-palette-theme] .campaign-section,
html[data-palette-lab="true"][data-palette-theme] .ways-section,
html[data-palette-lab="true"][data-palette-theme] .contact-options-section {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--lab-hero) 44%, white), color-mix(in srgb, var(--lab-cta) 20%, white)),
    var(--lab-soft);
}

html[data-palette-lab="true"][data-palette-theme] .campaign-panel.campaign-panel-simple,
html[data-palette-lab="true"][data-palette-theme] .final-cta-card {
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--lab-primary) 30%, transparent), transparent 48%),
    var(--lab-deep);
  box-shadow: inset 0 6px 0 var(--lab-cta), var(--lift);
}

html[data-palette-lab="true"][data-palette-theme] .campaign-panel.campaign-panel-simple h2,
html[data-palette-lab="true"][data-palette-theme] .final-cta-card h2 {
  color: #ffffff;
}

html[data-palette-lab="true"][data-palette-theme] .thermometer-fill {
  background: linear-gradient(90deg, var(--lab-cta), var(--lab-secondary));
}

html[data-palette-lab="true"][data-palette-theme] .image-card {
  border-color: var(--lab-hero);
}

html[data-palette-lab="true"][data-palette-theme] .image-card:nth-child(2n) {
  border-color: var(--lab-cta);
}

html[data-palette-lab="true"][data-palette-theme] .image-card:nth-child(3n) {
  border-color: var(--lab-tertiary);
}

html[data-palette-lab="true"][data-palette-theme] .image-label {
  color: var(--lab-link);
  background: color-mix(in srgb, var(--lab-hero) 28%, white);
  border-color: color-mix(in srgb, var(--lab-link) 20%, transparent);
}

html[data-palette-lab="true"][data-palette-theme] .program-grid > span,
html[data-palette-lab="true"][data-palette-theme] .ways-grid .way-card,
html[data-palette-lab="true"][data-palette-theme] .contact-option-card {
  background-color: rgba(255, 255, 255, 0.94);
  border-color: color-mix(in srgb, var(--lab-ink) 14%, transparent);
}

html[data-palette-lab="true"][data-palette-theme] .program-grid > span:nth-child(4n + 1),
html[data-palette-lab="true"][data-palette-theme] .ways-grid a:nth-child(4n + 1) .action-icon {
  --program-accent: var(--lab-hero);
  background-image: linear-gradient(135deg, color-mix(in srgb, var(--lab-hero) 24%, white), transparent 62%);
}

html[data-palette-lab="true"][data-palette-theme] .program-grid > span:nth-child(4n + 2),
html[data-palette-lab="true"][data-palette-theme] .ways-grid a:nth-child(4n + 2) .action-icon {
  --program-accent: var(--lab-cta);
}

html[data-palette-lab="true"][data-palette-theme] .program-grid > span:nth-child(4n + 3),
html[data-palette-lab="true"][data-palette-theme] .ways-grid a:nth-child(4n + 3) .action-icon {
  --program-accent: var(--lab-tertiary);
}

html[data-palette-lab="true"][data-palette-theme] .program-grid > span:nth-child(4n),
html[data-palette-lab="true"][data-palette-theme] .ways-grid a:nth-child(4n) .action-icon {
  --program-accent: var(--lab-secondary);
}

html[data-palette-lab="true"][data-palette-theme] .final-cta {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--lab-secondary) 24%, white), transparent 38%),
    linear-gradient(180deg, var(--lab-warm), var(--lab-soft));
}

html[data-palette-lab="true"][data-palette-theme] .dream-next-step,
html[data-palette-lab="true"][data-palette-theme] .contact-direct-band,
html[data-palette-lab="true"][data-palette-theme] .policy-hero {
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--lab-hero) 48%, white), color-mix(in srgb, var(--lab-cta) 25%, white)),
    var(--lab-soft);
}

html[data-palette-lab="true"][data-palette-theme] .site-footer {
  background:
    linear-gradient(90deg, var(--lab-primary), var(--lab-secondary), var(--lab-cta)) top / 100% 6px no-repeat,
    var(--lab-deep);
}

html[data-palette-lab="true"][data-palette-theme] .site-footer h2 {
  color: color-mix(in srgb, var(--lab-hero) 80%, white);
}

.palette-lab {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 1200;
  display: grid;
  justify-items: start;
  gap: 10px;
  width: min(360px, calc(100vw - 28px));
  color: #172033;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

.palette-lab__toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  padding: 10px 15px;
  color: #ffffff;
  font: inherit;
  font-weight: 850;
  background: #172033;
  border: 2px solid #ffffff;
  border-radius: 999px;
  box-shadow: 0 12px 32px rgba(23, 32, 51, 0.3);
  cursor: pointer;
}

.palette-lab__toggle-swatches {
  display: flex;
  gap: 3px;
}

.palette-lab__toggle-swatches i,
.palette-lab__swatches i {
  display: block;
  width: 12px;
  height: 12px;
  background: var(--swatch);
  border: 1px solid rgba(23, 32, 51, 0.18);
  border-radius: 50%;
}

.palette-lab__panel {
  width: 100%;
  max-height: min(650px, calc(100vh - 92px));
  padding: 18px;
  overflow: auto;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(23, 32, 51, 0.16);
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(23, 32, 51, 0.28);
}

.palette-lab__panel[hidden] {
  display: none;
}

.palette-lab__heading {
  margin: 0;
  color: #172033;
  font-size: 1.15rem;
  line-height: 1.2;
}

.palette-lab__note {
  margin: 5px 0 14px;
  color: #526174;
  font-size: 0.84rem;
}

.palette-lab__options {
  display: grid;
  gap: 8px;
}

.palette-lab__option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  min-height: 56px;
  padding: 10px 11px;
  color: #172033;
  text-align: left;
  background: #ffffff;
  border: 2px solid #dbe1e8;
  border-radius: 7px;
  cursor: pointer;
}

.palette-lab__option:hover {
  border-color: #7a8798;
}

.palette-lab__option[aria-pressed="true"] {
  background: #f1f5f8;
  border-color: #172033;
  box-shadow: 0 0 0 2px rgba(23, 32, 51, 0.12);
}

.palette-lab__option strong,
.palette-lab__option small {
  display: block;
}

.palette-lab__option strong {
  font-size: 0.92rem;
}

.palette-lab__option small {
  margin-top: 2px;
  color: #5d697a;
  font-size: 0.73rem;
}

.palette-lab__swatches {
  display: flex;
  gap: 4px;
}

.palette-lab__swatches i {
  width: 18px;
  height: 18px;
}

@media (max-width: 680px) {
  .palette-lab {
    left: 12px;
    bottom: calc(86px + env(safe-area-inset-bottom));
    width: min(340px, calc(100vw - 24px));
  }

  .palette-lab__panel {
    max-height: calc(100vh - 164px);
    padding: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .palette-lab *,
  .palette-lab *::before,
  .palette-lab *::after {
    scroll-behavior: auto;
    transition: none !important;
  }
}