.template-root[data-brand="biscayne-bay-beacon"] {
  --brand-tokens-brand-50: #eff8fa;
  --brand-tokens-brand-100: #e0f1f5;
  --brand-tokens-brand-200: #c3e3ea;
  --brand-tokens-brand-300: #7fc4d2;
  --brand-tokens-brand-400: #3697ab;
  --brand-tokens-brand-500: #267787;
  --brand-tokens-brand-600: #1d5f6d;
  --brand-tokens-brand-700: #154b56;
  --brand-tokens-brand-800: #103d46;
  --brand-tokens-brand-900: #0b2c32;
  --brand-tokens-brand-950: #071d22;
  --brand-tokens-greyscale-10: #fbfbf8;
  --brand-tokens-greyscale-50: #f7f6f2;
  --brand-tokens-greyscale-100: #eeece7;
  --brand-tokens-greyscale-200: #dedbd3;
  --brand-tokens-greyscale-300: #beb9ac;
  --brand-tokens-greyscale-400: #9c9786;
  --brand-tokens-greyscale-500: #6d685a;
  --brand-tokens-greyscale-600: #585346;
  --brand-tokens-greyscale-700: #454136;
  --brand-tokens-greyscale-800: #312e26;
  --brand-tokens-greyscale-900: #201e18;
  --brand-tokens-greyscale-950: #15130f;
  --brand-tokens-greyscale-1000: #0c0b08;
  --brand-tokens-typography-body: "Host Grotesk";
  --brand-tokens-typography-labels: "Host Grotesk";
  --brand-tokens-typography-titles-a: "Barlow Semi Condensed";
  --brand-tokens-typography-titles-b: "Barlow Semi Condensed";
  --tint-light: #eceff0;
}

.template-root[data-brand="biscayne-bay-beacon"] .block-section-title {
  letter-spacing: 0.015em;
}

.template-root[data-brand="biscayne-bay-beacon"] .block-container--bg-default,
.template-root[data-brand="biscayne-bay-beacon"] .block-container--bg-tint {
  --interactive-text-primary-hover: var(--brand-tokens-brand-700);
  --interactive-text-primary-pressed: var(--brand-tokens-brand-800);

  --interactive-contained-primary-hover: var(--brand-tokens-brand-800);
  --interactive-contained-primary-pressed: var(--brand-tokens-brand-900);
}

/* Container.css does not remap interactive accent tokens on painted surfaces. */
.template-root[data-brand="biscayne-bay-beacon"] .block-container--bg-brand {
  --interactive-text-primary-idle: var(--brand-tokens-brand-200);
  --interactive-text-primary-hover: var(--brand-tokens-brand-100);
  --interactive-text-primary-pressed: var(--brand-tokens-brand-50);
}

.template-root[data-brand="biscayne-bay-beacon"] .block-container--bg-image {
  --interactive-text-primary-idle: var(--brand-tokens-brand-200);
  --interactive-text-primary-hover: var(--brand-tokens-brand-100);
  --interactive-text-primary-pressed: var(--brand-tokens-brand-50);
}

.template-root[data-brand="biscayne-bay-beacon"] .block-container__bg-media::after {
  background: rgba(0, 0, 0, 0.62);
}

/* Shared CTA controls need light plates on this dark brand surface. */
.template-root[data-brand="biscayne-bay-beacon"] .block-container--bg-brand .block-cta__button,
.template-root[data-brand="biscayne-bay-beacon"]
  .block-container--bg-brand
  .block-header__subscribe-btn,
.template-root[data-brand="biscayne-bay-beacon"]
  .block-container--bg-image
  .block-header__subscribe-btn {
  background: var(--brand-tokens-greyscale-10);
  background-color: var(--brand-tokens-greyscale-10);
  border-color: var(--brand-tokens-greyscale-10);
  color: var(--brand-tokens-greyscale-900);
}

.template-root[data-brand="biscayne-bay-beacon"]
  .block-container--bg-brand
  .block-cta__button:hover,
.template-root[data-brand="biscayne-bay-beacon"]
  .block-container--bg-brand
  .block-header__subscribe-btn:hover,
.template-root[data-brand="biscayne-bay-beacon"]
  .block-container--bg-image
  .block-header__subscribe-btn:hover {
  background: var(--brand-tokens-greyscale-100);
  background-color: var(--brand-tokens-greyscale-100);
  border-color: var(--brand-tokens-greyscale-100);
  color: var(--brand-tokens-greyscale-900);
  opacity: 1;
}

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

.template-root[data-brand="biscayne-bay-beacon"]
  .block-container--bg-default
  .block-section-title--v1,
.template-root[data-brand="biscayne-bay-beacon"]
  .block-container--bg-tint
  .block-section-title--v1 {
  border-bottom-color: var(--brand-tokens-brand-600);
}

.template-root[data-brand="biscayne-bay-beacon"] .block-container--bg-brand {
  background-image: linear-gradient(
    180deg,
    transparent 0%,
    color-mix(in srgb, var(--brand-tokens-brand-950) 18%, transparent) 100%
  );
}