/* Temporary palette comparison. Load after the approved section styles.
   The original palette remains untouched when data-palette is absent.
   Photographs, skin tones and video lighting retain their original colors. */
:root[data-palette="blue"] {
  --navy: #030c2e;
  --ultramarine: #0826c8;
  --blue: #0b56ff;
  --cyan: #36c6ff;
  --violet: #7b63ff;
  --white: #fff;
  --yellow: #36c6ff;
  --yellow-soft: #86ddff;
  --focus: var(--blue);
  --palette-static-accent: var(--ultramarine);
  --palette-action-text: var(--blue);
  --palette-review-accent-filter: brightness(0) saturate(100%) invert(54.7%) sepia(56.4%) saturate(1138.1%) hue-rotate(183.3deg) brightness(106%) contrast(139.9%);
  --palette-review-ink-filter: brightness(0) saturate(100%) invert(27.8%) sepia(89.7%) saturate(1581.4%) hue-rotate(208.9deg) brightness(93.5%) contrast(128.1%);
}

:root[data-palette="blue"][data-theme="dark"] {
  --page: var(--navy);
  --focus: var(--yellow);
  --palette-static-accent: var(--white);
  --palette-action-text: var(--cyan);
}

/* Existing yellow tokens also cover the navigation, mobile purchase bar,
   selected agenda days and speaker controls. Cyan is reserved for actions. */
:root[data-palette="blue"] .button-yellow:hover {
  box-shadow: 0 6px 26px #36c6ff33;
}

/* The countdown is information, not an action: a quiet navy interval. */
:root[data-palette="blue"] .countdown-band {
  background: var(--navy);
  color: var(--white);
  border-top-color: #ffffff14;
  --icon-filter: invert(1);
  --focus: var(--cyan);
}

:root[data-palette="blue"] .countdown-intro p,
:root[data-palette="blue"] .countdown strong {
  color: var(--white);
}

:root[data-palette="blue"] .countdown-intro .small-heading,
:root[data-palette="blue"] .countdown div span,
:root[data-palette="blue"] .countdown-note {
  color: #ffffffbf;
}

:root[data-palette="blue"] .countdown-note {
  border-left-color: #ffffff26;
}

:root[data-palette="blue"] .count-separator {
  color: #ffffff55;
}

:root[data-palette="blue"] .demo-dot {
  background: var(--palette-static-accent);
}

:root[data-palette="blue"] .hero-review {
  --focus: var(--yellow);
}

:root[data-palette="blue"] .hero-review :focus-visible {
  outline-color: var(--yellow);
}

/* Research remains a dark photographic section in both page themes. */
:root[data-palette="blue"] #pilares.pillars-research {
  --pillar-accent: var(--white);
}

:root[data-palette="blue"] #pilares .research-signature,
:root[data-palette="blue"] #pilares .research-copy h2 span {
  color: var(--white);
}

:root[data-palette="blue"] #pilares .research-seal {
  background: var(--white);
  color: var(--navy);
}

/* These six standalone SVGs have a fixed yellow fill. Recolor only the
   vector silhouettes; no photographic surface is filtered. */
:root[data-palette="blue"] #pilares .pillar-symbol-image {
  filter: brightness(0) invert(1);
}

:root[data-palette="blue"] #experiencias .experience-card:hover {
  --experience-edge: var(--yellow);
}

:root[data-palette="blue"] #experiencias .experience-trigger:focus-visible {
  outline-color: var(--yellow);
}

:root[data-palette="blue"] #experiencias .experience-tag {
  color: var(--white);
}

:root[data-palette="blue"] #experiencias .experience-open {
  background: var(--yellow);
}

/* Fixed-color credential details must follow the token-driven buttons. */
:root[data-palette="blue"] .tickets-section .ticket-day {
  --focus: var(--blue);
}

:root[data-palette="blue"] .tickets-section .ticket-pass {
  --focus: var(--yellow);
  --ticket-edge: linear-gradient(130deg, #ffffff55 0%, var(--ultramarine) 30%, #7b63ff80 66%, #ffffff33 100%);
}

:root[data-palette="blue"] .tickets-section .pass-ribbon {
  color: var(--white);
}

:root[data-palette="blue"] .ticket-pass .ticket-surface::before {
  background-image: linear-gradient(0deg,#071035 0%,#071035 48%,#071035eb 66%,#071035b5 100%),linear-gradient(90deg,#071035 10%,#071035b3 58%,#07103500 100%),url("assets/images/backgrounds/motion/blue/01-vidro-hexagonal-profundo.webp");
}

:root[data-palette="blue"] .ticket-pass .ticket-divider::after {
  background: #ffffff80;
}

:root[data-palette="blue"] .ticket-day .ticket-divider::after {
  background: var(--ultramarine);
}

:root[data-palette="blue"] .tickets-section .ticket-day .ticket-button {
  background: var(--blue);
}

:root[data-palette="blue"] .tickets-section .ticket-day .ticket-button:hover {
  background: var(--ultramarine);
}

:root[data-palette="blue"] .member-coupon {
  background: #0826c809;
  border-left-color: var(--ultramarine);
}

:root[data-palette="blue"][data-theme="dark"] .member-coupon {
  background: #ffffff05;
  border-left-color: #ffffff4d;
}

:root[data-palette="blue"] #empresas.companies-art {
  --companies-accent: var(--ultramarine);
}

:root[data-palette="blue"][data-theme="dark"] #empresas.companies-art {
  --companies-accent: var(--white);
}

/* Form fields always sit on a dark blue panel, including in light mode.
   Preserve validation colors; change the brand accents and focus together. */
:root[data-palette="blue"] .interest-form {
  --focus: var(--yellow);
}

:root[data-palette="blue"] .interest-form::before {
  background: var(--ultramarine);
}

:root[data-palette="blue"] .interest-form::after {
  background: var(--white);
}

:root[data-palette="blue"] .interest-form .field input,
:root[data-palette="blue"] .interest-form .field select {
  background: var(--blue);
  caret-color: var(--yellow);
}

:root[data-palette="blue"] .interest-form .field input::placeholder {
  color: #e8efff;
}

:root[data-palette="blue"] .interest-form .field input:focus-visible,
:root[data-palette="blue"] .interest-form .field select:focus-visible {
  background: var(--ultramarine);
  border-color: var(--yellow);
  outline-color: var(--yellow);
}

:root[data-palette="blue"] .interest-form .field input:autofill {
  caret-color: var(--yellow);
  box-shadow: 0 0 0 1000px var(--blue) inset;
}

:root[data-palette="blue"] .interest-form .field select option {
  background: var(--blue);
}

:root[data-palette="blue"] .interest-form .form-consent input {
  accent-color: var(--yellow);
}

:root[data-palette="blue"] .interest-form > .button {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--navy);
}

:root[data-palette="blue"] .interest-form > .button:hover {
  background: var(--yellow-soft);
  border-color: var(--yellow-soft);
  box-shadow: none;
}

:root[data-palette="blue"] .interest-form .inline-link:hover {
  color: var(--yellow);
}

:root[data-palette="blue"] .interest-form .form-result {
  border-left-color: #ffffffbf;
}

:root[data-palette="blue"] .interest-form :focus-visible {
  outline-color: var(--yellow);
}

/* Only the final CTA's button receives cyan, not the surrounding section. */
:root[data-palette="blue"] .final-cta {
  background: var(--navy);
  color: var(--white);
  --focus: var(--cyan);
}

:root[data-palette="blue"] .final-cta .eyebrow {
  color: #ffffffbf;
}

:root[data-palette="blue"] .final-cta .button {
  background: var(--cyan);
  color: var(--navy);
  --icon-filter: none;
}

:root[data-palette="blue"] .final-cta .button:hover {
  background: var(--yellow-soft);
}

:root[data-palette="blue"] .final-cta .button-icon {
  background: #030c2e12;
}

/* Its decorative SVG has one embedded yellow gradient stop. */
:root[data-palette="blue"] .final-cta::before {
  filter: var(--palette-review-ink-filter);
}

/* Also cover the older announcement/phone variants retained in the base CSS. */
:root[data-palette="blue"] .speakers-announcement-copy > .text-link {
  --icon-filter: var(--palette-review-accent-filter);
}

:root[data-palette="blue"] .buddy-visual-surface::after {
  border-color: #ffffff40;
}

:root[data-palette="blue"] .buddy-app-eyebrow,
:root[data-palette="blue"] .buddy-match-symbol > span {
  color: var(--white);
}

/* Static accents use deep blue on light surfaces and white on dark ones.
   Cyan continues to identify links, buttons and active/focused controls. */
:root[data-palette="blue"] .hero h1 span,
:root[data-palette="blue"] .hero-eyebrow,
:root[data-palette="blue"] .about-copy strong,
:root[data-palette="blue"] .event-kicker,
:root[data-palette="blue"] .speakers-page-heading h2 span,
:root[data-palette="blue"] .speaker-session-label,
:root[data-palette="blue"] .buddy-copy h2 span,
:root[data-palette="blue"] .pillar-number {
  color: var(--palette-static-accent);
}

:root[data-palette="blue"] .hero-meta {
  --hero-fact-accent: var(--palette-static-accent);
}

:root[data-palette="blue"] .eyebrow-line,
:root[data-palette="blue"] .about-heading h2::before {
  background: var(--palette-static-accent);
}

:root[data-palette="blue"] .census-note {
  border-left-color: var(--palette-static-accent);
}

:root[data-palette="blue"] .buddy-art-section {
  --buddy-accent: var(--palette-static-accent);
}

:root[data-palette="blue"] .nexus-stage {
  --stage-accent: var(--palette-static-accent);
}

:root[data-palette="blue"] .nexus-agenda {
  --route-accent: var(--palette-static-accent);
}

:root[data-palette="blue"] #programacao .program-speaker-link {
  color: var(--palette-action-text);
  text-decoration-color: var(--palette-action-text);
}

:root[data-palette="blue"] #programacao .program-speaker-link:hover,
:root[data-palette="blue"] #programacao .program-speaker-link:focus-visible {
  color: var(--palette-action-text);
  outline-color: var(--palette-action-text);
}

:root[data-palette="blue"] .status-label {
  color: var(--ink);
  background: var(--tint);
}

:root[data-palette="blue"] .noscript-notice {
  background: var(--navy);
  color: var(--white);
}

/* Audience chips are informational, even on hover. */
:root[data-palette="blue"] .audience-list li:hover {
  background: var(--audience-chip-bg);
  border-color: var(--audience-chip-border);
  color: var(--ink);
}

/* These compositions remain dark regardless of the page theme. */
:root[data-palette="blue"] .experiences-section .section-heading .eyebrow,
:root[data-palette="blue"] .exhibit-copy .eyebrow,
:root[data-palette="blue"] .speakers-announcement .event-pending,
:root[data-palette="blue"] .speakers-art-word span,
:root[data-palette="blue"] .stage-visual-title span {
  color: var(--white);
}

:root[data-palette="blue"] .stage-visual-label::before {
  background: var(--white);
}

:root[data-palette="blue"] .program-panel .event-pending {
  color: var(--muted);
}

/* Future lots already replace the hidden checkout link with neutral copy.
   Keep any disabled checkout state neutral even if its button class remains. */
:root[data-palette="blue"] .tickets-section .ticket-card .ticket-button:is([hidden], [aria-disabled="true"], :disabled),
:root[data-palette="blue"] .tickets-section .ticket-card .ticket-button:is([hidden], [aria-disabled="true"], :disabled):hover {
  background: transparent;
  border-color: currentColor;
  color: #52617d;
  box-shadow: none;
}

:root[data-palette="blue"] .tickets-section .ticket-pass .ticket-button:is([hidden], [aria-disabled="true"], :disabled),
:root[data-palette="blue"] .tickets-section .ticket-pass .ticket-button:is([hidden], [aria-disabled="true"], :disabled):hover {
  color: #b9c9e8;
}

:root[data-palette="blue"] .interest-form > .button:disabled,
:root[data-palette="blue"] .interest-form > .button:disabled:hover {
  background: #ffffff14;
  border-color: #ffffff40;
  color: #e8efff;
  box-shadow: none;
  --icon-filter: invert(1);
}

@media (forced-colors: active) {
  :root[data-palette="blue"] .interest-form :focus-visible,
  :root[data-palette="blue"] .hero-review :focus-visible,
  :root[data-palette="blue"] #experiencias .experience-trigger:focus-visible {
    outline-color: Highlight;
  }
  :root[data-palette="blue"] #experiencias .experience-tag {
    color: ButtonText;
  }
}