.template-root[data-brand="league-city-herald"] {
  --brand-tokens-brand-50: #e7fdfe;
  --brand-tokens-brand-100: #d0fbfb;
  --brand-tokens-brand-200: #a2f4f6;
  --brand-tokens-brand-300: #65eaec;
  --brand-tokens-brand-400: #2adcdf;
  --brand-tokens-brand-500: #1dadaf;
  --brand-tokens-brand-600: #178a8c;
  --brand-tokens-brand-700: #137072;
  --brand-tokens-brand-800: #105f60;
  --brand-tokens-brand-900: #0d494a;
  --brand-tokens-brand-950: #082a2b;
  --brand-tokens-greyscale-10: #fdf8ee;
  --brand-tokens-greyscale-50: #f5efe1;
  --brand-tokens-greyscale-100: #eae3d1;
  --brand-tokens-greyscale-200: #d3cab6;
  --brand-tokens-greyscale-300: #b1a795;
  --brand-tokens-greyscale-400: #8e8676;
  --brand-tokens-greyscale-500: #5d564b;
  --brand-tokens-greyscale-600: #4d473e;
  --brand-tokens-greyscale-700: #3c3730;
  --brand-tokens-greyscale-800: #2a2620;
  --brand-tokens-greyscale-900: #1e1611;
  --brand-tokens-greyscale-950: #14100c;
  --brand-tokens-greyscale-1000: #090706;
  --brand-tokens-typography-body: "Lora";
  --brand-tokens-typography-labels: "Inter Tight";
  --brand-tokens-typography-titles-a: "Instrument Sans";
  --brand-tokens-typography-titles-b: "Instrument Sans";
  --tint-light: #f2e9d8;
}

.template-root[data-brand="league-city-herald"] .block-section-title {
  letter-spacing: 0.02em;
}

/* Use a darker stop for text on light surfaces without changing the dark scheme. */
.template-root[data-brand="league-city-herald"][data-color-scheme="light"] {
  --interactive-text-primary-idle: var(--brand-tokens-brand-700);
  --text-default-4: var(--brand-tokens-brand-700);
}

/* Limit this meta color to surfaces that do not remap text for contrast. */
.template-root[data-brand="league-city-herald"] .block-container--bg-default .card-meta,
.template-root[data-brand="league-city-herald"] .block-container--bg-tint .card-meta {
  color: color-mix(
    in srgb,
    var(--brand-tokens-greyscale-700) 78%,
    var(--brand-tokens-greyscale-300)
  );
}

/* Keep the light gradient layer at 12% so band text stays above 4.5:1. */
.template-root[data-brand="league-city-herald"] .block-container--bg-brand {
  background-image:
    radial-gradient(
      120% 80% at 50% -24%,
      color-mix(in srgb, var(--brand-tokens-brand-500) 12%, transparent) 0%,
      transparent 58%
    ),
    radial-gradient(
      130% 90% at 50% 124%,
      color-mix(in srgb, var(--brand-tokens-brand-950) 30%, transparent) 0%,
      transparent 68%
    );
}

/* Raise muted text contrast only on the lightest part of the brand band. */
.template-root[data-brand="league-city-herald"] .block-container--bg-brand {
  --text-default-3: var(--brand-tokens-greyscale-50);
}

/* brand-800 keeps the active nav item above 4.5:1 on the header wash. */
.template-root[data-brand="league-city-herald"] :where(.block-menubar:not([data-bg="inverted"], [data-bg="brand"])) .block-menubar__link[aria-current="page"] {
  color: var(--brand-tokens-brand-800);
}

/* Restate mobile values because overriding this token bypasses the shared breakpoint. */
.template-root[data-brand="league-city-herald"] .block-hero--wide {
  --card-title-xl: 45px;
  --card-title-xl-lh: 52px;
}
@media (max-width: 767px) {
  .template-root[data-brand="league-city-herald"] .block-hero--wide {
    --card-title-xl: 27px;
    --card-title-xl-lh: 33px;
  }
}

.template-root[data-brand="league-city-herald"] .block-container--bg-default:has(.block-header) {
  background-image:
    radial-gradient(
      130% 84% at 50% 118%,
      color-mix(in srgb, var(--brand-tokens-brand-500) 26%, transparent) 0%,
      transparent 76%
    ),
    radial-gradient(
      100% 108% at 50% -22%,
      color-mix(in srgb, var(--brand-tokens-greyscale-100) 88%, transparent) 0%,
      transparent 56%
    );
}