.template-root[data-brand="aventura-beacon"] {
  --brand-tokens-brand-50: #f9f1f8;
  --brand-tokens-brand-100: #f3e2f1;
  --brand-tokens-brand-200: #e6c7e3;
  --brand-tokens-brand-300: #c987c4;
  --brand-tokens-brand-400: #9f4197;
  --brand-tokens-brand-500: #84337d;
  --brand-tokens-brand-600: #6f2a69;
  --brand-tokens-brand-700: #561f52;
  --brand-tokens-brand-800: #441741;
  --brand-tokens-brand-900: #32102f;
  --brand-tokens-brand-950: #1f0a1d;

  --brand-tokens-greyscale-10: #fcfcfd;
  --brand-tokens-greyscale-50: #f6f7f8;
  --brand-tokens-greyscale-100: #ebecef;
  --brand-tokens-greyscale-200: #d8d9df;
  --brand-tokens-greyscale-300: #b1b3be;
  --brand-tokens-greyscale-400: #8b8e9c;
  --brand-tokens-greyscale-500: #5a5d6c;
  --brand-tokens-greyscale-600: #474a57;
  --brand-tokens-greyscale-700: #363944;
  --brand-tokens-greyscale-800: #262831;
  --brand-tokens-greyscale-900: #181920;
  --brand-tokens-greyscale-950: #0f1015;
  --brand-tokens-greyscale-1000: #08090c;
  --brand-tokens-typography-body: "Inter Tight";
  --brand-tokens-typography-labels: "Inter Tight";
  --brand-tokens-typography-titles-a: "Space Grotesk";
  --brand-tokens-typography-titles-b: "Space Grotesk";

  --tint-light: #edecf2;
}

.template-root[data-brand="aventura-beacon"] {
  --text-default-4: var(--brand-tokens-brand-400);
  --interactive-text-primary-idle: var(--brand-tokens-brand-500);
  --interactive-text-primary-pressed: var(--brand-tokens-brand-500);
  --interactive-text-primary-hover: var(--brand-tokens-brand-700);
}

.template-root[data-brand="aventura-beacon"] {
  --elevation-fill-default-4: var(--brand-tokens-brand-400);
}

.template-root[data-brand="aventura-beacon"]
  .block-section-title--v8
  .block-section-title__heading {
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.template-root[data-brand="aventura-beacon"] .block-container--bg-inverted {
  /* Painted Containers remap text tokens, but not interactive accent tokens. */
  --text-inverted-4: var(--brand-tokens-brand-300);
  --interactive-text-primary-idle: var(--brand-tokens-brand-300);
  --interactive-text-primary-pressed: var(--brand-tokens-brand-300);
  --interactive-text-primary-hover: var(--brand-tokens-brand-200);
}

.template-root[data-brand="aventura-beacon"] .block-container--bg-default:has(.block-header) {
  background-image:
    radial-gradient(
      64% 116% at 88% -12%,
      color-mix(in srgb, var(--brand-tokens-greyscale-10) 30%, transparent) 0%,
      transparent 58%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--brand-tokens-brand-300) 22%, transparent) 0%,
      color-mix(in srgb, var(--brand-tokens-brand-300) 10%, transparent) 76%,
      transparent 100%
    );
}

.template-root[data-brand="aventura-beacon"] .block-container--bg-inverted:has(.block-menubar) {
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, var(--brand-tokens-brand-600) 26%, transparent) 0%,
    color-mix(in srgb, var(--brand-tokens-brand-600) 10%, transparent) 100%
  );
}

.template-root[data-brand="aventura-beacon"] .block-container--bg-inverted:has(.block-cta) {
  background-image: radial-gradient(
    120% 140% at 50% 0%,
    color-mix(in srgb, var(--brand-tokens-brand-800) 22%, transparent) 0%,
    transparent 72%
  );
}

/* The signup input keeps a light fill after its text tokens are remapped. */
.template-root[data-brand="aventura-beacon"] .block-container--bg-inverted .block-cta__input {
  color: var(--brand-tokens-greyscale-900);
}

/* Cta.css does not retarget this button fill on an inverted Container. */
.template-root[data-brand="aventura-beacon"] .block-container--bg-inverted .block-cta__button {
  background: var(--brand-tokens-brand-300);
  border-color: var(--brand-tokens-brand-300);
  color: var(--brand-tokens-greyscale-900);
}

.template-root[data-brand="aventura-beacon"]
  .block-container--bg-inverted
  .block-cta__button:hover {
  background: var(--brand-tokens-brand-200);
  border-color: var(--brand-tokens-brand-200);
  color: var(--brand-tokens-greyscale-900);
  opacity: 1;
}