/* Color-only variants. V1 keeps its original stylesheet without overrides. */
html[data-version="2"] {
  --palette-canvas: #ffffff;
  --palette-ink: #112456;
  --palette-header-border: #aebfe8;
  --palette-header-button: #1648ff;
  --palette-header-button-text: #ffffff;
  --palette-header-selected: #ffe54a;
  --palette-header-selected-text: #112456;
  --palette-hero: #1648ff;
  --palette-hero-text: #ffffff;
  --palette-hero-accent: #fff35c;
  --palette-intro: #fffdf2;
  --palette-intro-text: #112456;
  --palette-intro-accent: #173bb5;
  --palette-when: #ffe54a;
  --palette-when-text: #112456;
  --palette-when-accent: #112456;
  --palette-when-border: #9c8614;
  --palette-course: #e4edff;
  --palette-course-text: #112456;
  --palette-course-accent: #173bb5;
  --palette-course-border: #96a9db;
  --palette-contact: #1031b8;
  --palette-contact-text: #ffffff;
  --palette-contact-accent: #ffe54a;
  --palette-contact-button: #ffe54a;
  --palette-contact-button-text: #112456;
  --palette-footer-text: #112456;
  --palette-lightbox: #ffffff;
  --palette-lightbox-text: #112456;
  --palette-wave-one: #ffe54a;
  --palette-wave-two: #8acaff;
}

html[data-version="3"] {
  --palette-canvas: #ffffff;
  --palette-ink: #251529;
  --palette-header-border: #e6b7a4;
  --palette-header-button: #b72a11;
  --palette-header-button-text: #ffffff;
  --palette-header-selected: #ffcf3b;
  --palette-header-selected-text: #251529;
  --palette-hero: #ff5a32;
  --palette-hero-text: #251529;
  --palette-hero-accent: #251529;
  --palette-intro: #fff9ed;
  --palette-intro-text: #251529;
  --palette-intro-accent: #a02511;
  --palette-when: #ffcf3b;
  --palette-when-text: #251529;
  --palette-when-accent: #521047;
  --palette-when-border: #aa7a19;
  --palette-course: #fff1ea;
  --palette-course-text: #251529;
  --palette-course-accent: #a02511;
  --palette-course-border: #cb9d8b;
  --palette-contact: #521047;
  --palette-contact-text: #ffffff;
  --palette-contact-accent: #ffe45c;
  --palette-contact-button: #ffe45c;
  --palette-contact-button-text: #251529;
  --palette-footer-text: #521047;
  --palette-lightbox: #ffffff;
  --palette-lightbox-text: #251529;
  --palette-wave-one: #ffcf3b;
  --palette-wave-two: #ffaf7e;
}

html[data-version="4"] {
  --palette-canvas: #ffffff;
  --palette-ink: #23103d;
  --palette-header-border: #c2a8e8;
  --palette-header-button: #6b20df;
  --palette-header-button-text: #ffffff;
  --palette-header-selected: #d7ff3f;
  --palette-header-selected-text: #23103d;
  --palette-hero: #6b20df;
  --palette-hero-text: #ffffff;
  --palette-hero-accent: #d7ff3f;
  --palette-intro: #faf8ff;
  --palette-intro-text: #23103d;
  --palette-intro-accent: #6020bf;
  --palette-when: #d7ff3f;
  --palette-when-text: #23103d;
  --palette-when-accent: #411192;
  --palette-when-border: #7d951a;
  --palette-course: #eadfff;
  --palette-course-text: #23103d;
  --palette-course-accent: #6020bf;
  --palette-course-border: #b59ad6;
  --palette-contact: #411192;
  --palette-contact-text: #ffffff;
  --palette-contact-accent: #d7ff3f;
  --palette-contact-button: #d7ff3f;
  --palette-contact-button-text: #23103d;
  --palette-footer-text: #411192;
  --palette-lightbox: #ffffff;
  --palette-lightbox-text: #23103d;
  --palette-wave-one: #d7ff3f;
  --palette-wave-two: #bb98ff;
}

html[data-version="5"] {
  --palette-canvas: #ffffff;
  --palette-ink: #0c1029;
  --palette-header-border: #91c9d1;
  --palette-header-button: #a80060;
  --palette-header-button-text: #ffffff;
  --palette-header-selected: #4cf4ee;
  --palette-header-selected-text: #0c1029;
  --palette-hero: #0c1029;
  --palette-hero-text: #ffffff;
  --palette-hero-accent: #4cf4ee;
  --palette-intro: #141a39;
  --palette-intro-text: #ffffff;
  --palette-intro-accent: #ff68c2;
  --palette-when: #4cf4ee;
  --palette-when-text: #0c1029;
  --palette-when-accent: #5c1451;
  --palette-when-border: #168880;
  --palette-course: #e8e5ff;
  --palette-course-text: #0c1029;
  --palette-course-accent: #920052;
  --palette-course-border: #a8a0ca;
  --palette-contact: #a80060;
  --palette-contact-text: #ffffff;
  --palette-contact-accent: #e1ff45;
  --palette-contact-button: #e1ff45;
  --palette-contact-button-text: #0c1029;
  --palette-footer-text: #0c1029;
  --palette-lightbox: #ffffff;
  --palette-lightbox-text: #0c1029;
  --palette-wave-one: #4cf4ee;
  --palette-wave-two: #ff68c2;
}

:where(html[data-version="2"], html[data-version="3"], html[data-version="4"], html[data-version="5"]) body,
:where(html[data-version="2"], html[data-version="3"], html[data-version="4"], html[data-version="5"]) .v1-page {
  --surface: var(--palette-canvas);
  --ink: var(--palette-ink);
  --accent: var(--palette-header-selected);
  --focus: var(--palette-ink);
  --section-text: var(--palette-ink);
  --section-accent: var(--palette-ink);
  background-color: var(--palette-canvas);
  color: var(--palette-ink);
}

:where(html[data-version="2"], html[data-version="3"], html[data-version="4"], html[data-version="5"]) .v1-header {
  background-color: var(--palette-canvas);
  color: var(--palette-ink);
  border-color: var(--palette-header-border);
}

:where(html[data-version="2"], html[data-version="3"], html[data-version="4"], html[data-version="5"]) .v1-navigation a,
:where(html[data-version="2"], html[data-version="3"], html[data-version="4"], html[data-version="5"]) .v1-header .site-language-button {
  color: var(--palette-ink);
}

:where(html[data-version="2"], html[data-version="3"], html[data-version="4"], html[data-version="5"]) .v1-navigation .v1-nav-contact {
  background-color: var(--palette-header-button);
  color: var(--palette-header-button-text);
}

:where(html[data-version="2"], html[data-version="3"], html[data-version="4"], html[data-version="5"]) .v1-header .site-language-button[aria-pressed="true"] {
  background-color: var(--palette-header-selected);
  color: var(--palette-header-selected-text);
}

:where(html[data-version="2"], html[data-version="3"], html[data-version="4"], html[data-version="5"]) .v1-nav-toggle {
  border-color: var(--palette-ink);
}

:where(html[data-version="2"], html[data-version="3"], html[data-version="4"], html[data-version="5"]) .site-version-button {
  background-color: var(--palette-canvas);
  color: var(--palette-ink);
  border-color: var(--palette-header-border);
}

:where(html[data-version="2"], html[data-version="3"], html[data-version="4"], html[data-version="5"]) .site-version-button:hover {
  background-color: var(--palette-header-selected);
  color: var(--palette-header-selected-text);
}

:where(html[data-version="2"], html[data-version="3"], html[data-version="4"], html[data-version="5"]) .site-version-button[aria-pressed="true"] {
  background-color: var(--palette-header-button);
  color: var(--palette-header-button-text);
  border-color: var(--palette-header-button);
}

:where(html[data-version="2"], html[data-version="3"], html[data-version="4"], html[data-version="5"]) .v1-hero {
  --section-text: var(--palette-hero-text);
  --section-accent: var(--palette-hero-accent);
  --focus: var(--palette-hero-accent);
  background-color: var(--palette-hero);
  color: var(--palette-hero-text);
}

:where(html[data-version="2"], html[data-version="3"], html[data-version="4"], html[data-version="5"]) .v1-introduction {
  --section-text: var(--palette-intro-text);
  --section-accent: var(--palette-intro-accent);
  --focus: var(--palette-intro-accent);
  background-color: var(--palette-intro);
  color: var(--palette-intro-text);
}

:where(html[data-version="2"], html[data-version="3"], html[data-version="4"], html[data-version="5"]) .v1-when {
  --section-text: var(--palette-when-text);
  --section-accent: var(--palette-when-accent);
  --focus: var(--palette-when-accent);
  background-color: var(--palette-when);
  color: var(--palette-when-text);
}

:where(html[data-version="2"], html[data-version="3"], html[data-version="4"], html[data-version="5"]) .v1-course {
  --section-text: var(--palette-course-text);
  --section-accent: var(--palette-course-accent);
  --focus: var(--palette-course-accent);
  background-color: var(--palette-course);
  color: var(--palette-course-text);
}

:where(html[data-version="2"], html[data-version="3"], html[data-version="4"], html[data-version="5"]) .v1-contact {
  --section-text: var(--palette-contact-text);
  --section-accent: var(--palette-contact-accent);
  --focus: var(--palette-contact-accent);
  background-color: var(--palette-contact);
  color: var(--palette-contact-text);
}

:where(html[data-version="2"], html[data-version="3"], html[data-version="4"], html[data-version="5"]) .v1-site-title {
  color: var(--section-accent);
}

:where(html[data-version="2"], html[data-version="3"], html[data-version="4"], html[data-version="5"]) .v1-page mark {
  background-color: transparent;
  color: var(--section-accent);
}

:where(html[data-version="2"], html[data-version="3"], html[data-version="4"], html[data-version="5"]) .v1-featured-video a,
:where(html[data-version="2"], html[data-version="3"], html[data-version="4"], html[data-version="5"]) .v1-down-link,
:where(html[data-version="2"], html[data-version="3"], html[data-version="4"], html[data-version="5"]) .v1-case-video figcaption,
:where(html[data-version="2"], html[data-version="3"], html[data-version="4"], html[data-version="5"]) .v1-case-video a,
:where(html[data-version="2"], html[data-version="3"], html[data-version="4"], html[data-version="5"]) .v1-call-recommendation,
:where(html[data-version="2"], html[data-version="3"], html[data-version="4"], html[data-version="5"]) .v1-time-limit,
:where(html[data-version="2"], html[data-version="3"], html[data-version="4"], html[data-version="5"]) .v1-callout a,
:where(html[data-version="2"], html[data-version="3"], html[data-version="4"], html[data-version="5"]) .v1-audiences,
:where(html[data-version="2"], html[data-version="3"], html[data-version="4"], html[data-version="5"]) .v1-page .v1-small-heading,
:where(html[data-version="2"], html[data-version="3"], html[data-version="4"], html[data-version="5"]) .v1-standards-grid,
:where(html[data-version="2"], html[data-version="3"], html[data-version="4"], html[data-version="5"]) .v1-course-register,
:where(html[data-version="2"], html[data-version="3"], html[data-version="4"], html[data-version="5"]) .v1-page .v1-challenge h3,
:where(html[data-version="2"], html[data-version="3"], html[data-version="4"], html[data-version="5"]) .v1-page .v1-example:nth-child(1) h3,
:where(html[data-version="2"], html[data-version="3"], html[data-version="4"], html[data-version="5"]) .v1-page .v1-example:nth-child(2) h3,
:where(html[data-version="2"], html[data-version="3"], html[data-version="4"], html[data-version="5"]) .v1-page .v1-knowledge > h3,
:where(html[data-version="2"], html[data-version="3"], html[data-version="4"], html[data-version="5"]) .v1-knowledge li,
:where(html[data-version="2"], html[data-version="3"], html[data-version="4"], html[data-version="5"]) .v1-signature {
  color: var(--section-text);
}

:where(html[data-version="2"], html[data-version="3"], html[data-version="4"], html[data-version="5"]) .v1-section-index {
  color: var(--section-accent);
  border-color: var(--section-accent);
}

:where(html[data-version="2"], html[data-version="3"], html[data-version="4"], html[data-version="5"]) .v1-situations li::before,
:where(html[data-version="2"], html[data-version="3"], html[data-version="4"], html[data-version="5"]) .v1-knowledge li::before {
  color: var(--section-accent);
}

:where(html[data-version="2"], html[data-version="3"], html[data-version="4"], html[data-version="5"]) .v1-callout {
  border-color: var(--section-accent);
}

:where(html[data-version="2"], html[data-version="3"], html[data-version="4"], html[data-version="5"]) .v1-situations li {
  border-color: var(--palette-when-border);
}

:where(html[data-version="2"], html[data-version="3"], html[data-version="4"], html[data-version="5"]) .v1-standards-grid,
:where(html[data-version="2"], html[data-version="3"], html[data-version="4"], html[data-version="5"]) .v1-standards-grid li,
:where(html[data-version="2"], html[data-version="3"], html[data-version="4"], html[data-version="5"]) .v1-example,
:where(html[data-version="2"], html[data-version="3"], html[data-version="4"], html[data-version="5"]) .v1-knowledge,
:where(html[data-version="2"], html[data-version="3"], html[data-version="4"], html[data-version="5"]) .v1-knowledge li {
  border-color: var(--palette-course-border);
}

:where(html[data-version="2"], html[data-version="3"], html[data-version="4"], html[data-version="5"]) .v1-photo__expand {
  background-color: var(--palette-canvas);
  color: var(--palette-ink);
}

:where(html[data-version="2"], html[data-version="3"], html[data-version="4"], html[data-version="5"]) .v1-whatsapp-contact {
  background-color: var(--palette-contact-button);
  color: var(--palette-contact-button-text);
}

:where(html[data-version="2"], html[data-version="3"], html[data-version="4"], html[data-version="5"]) .v1-footer {
  --focus: var(--palette-ink);
  background-color: var(--palette-canvas);
  color: var(--palette-footer-text);
}

:where(html[data-version="2"], html[data-version="3"], html[data-version="4"], html[data-version="5"]) .v1-lightbox {
  --focus: var(--palette-lightbox-text);
  background-color: var(--palette-lightbox);
  color: var(--palette-lightbox-text);
}

:where(html[data-version="2"], html[data-version="3"], html[data-version="4"], html[data-version="5"]) .v1-lightbox__close {
  color: var(--palette-lightbox-text);
}

:where(html[data-version="2"], html[data-version="3"], html[data-version="4"], html[data-version="5"]) .v1-lightbox::backdrop {
  background-color: color-mix(in srgb, var(--palette-ink) 86%, transparent);
}

:where(html[data-version="2"], html[data-version="3"], html[data-version="4"], html[data-version="5"]) .v1-waves path:nth-child(1) {
  fill: var(--palette-wave-one);
}

:where(html[data-version="2"], html[data-version="3"], html[data-version="4"], html[data-version="5"]) .v1-waves path:nth-child(2) {
  fill: var(--palette-wave-two);
}

:where(html[data-version="2"], html[data-version="3"], html[data-version="4"], html[data-version="5"]) .v1-waves path:nth-child(3) {
  fill: var(--palette-intro);
}