.template-root[data-brand="beaverton-beat"] {
  --brand-tokens-brand-50: #f2f1f9;
  --brand-tokens-brand-100: #e5e3f2;
  --brand-tokens-brand-200: #cbc8e4;
  --brand-tokens-brand-300: #9e98cd;
  --brand-tokens-brand-400: #5b52ad;
  --brand-tokens-brand-500: #433c86;
  --brand-tokens-brand-600: #342e6b;
  --brand-tokens-brand-700: #272253;
  --brand-tokens-brand-800: #1e1a42;
  --brand-tokens-brand-900: #151230;
  --brand-tokens-brand-950: #0d0b1e;

  --brand-tokens-greyscale-10: #fcfcfd;
  --brand-tokens-greyscale-50: #f6f6f8;
  --brand-tokens-greyscale-100: #ebebef;
  --brand-tokens-greyscale-200: #d8d8df;
  --brand-tokens-greyscale-300: #b2b2bd;
  --brand-tokens-greyscale-400: #8b8b9c;
  --brand-tokens-greyscale-500: #5a5a6c;
  --brand-tokens-greyscale-600: #474757;
  --brand-tokens-greyscale-700: #363644;
  --brand-tokens-greyscale-800: #262631;
  --brand-tokens-greyscale-900: #181820;
  --brand-tokens-greyscale-950: #0f0f15;
  --brand-tokens-greyscale-1000: #08080c;

  --brand-tokens-typography-body: "DM Sans";
  --brand-tokens-typography-labels: "DM Sans";
  --brand-tokens-typography-titles-a: "Barlow Semi Condensed";
  --brand-tokens-typography-titles-b: "Barlow Semi Condensed";

  --tint-light: #ebedf4;
}

.template-root[data-brand="beaverton-beat"] .block-section-title {
  letter-spacing: 0.03em;
}

.template-root[data-brand="beaverton-beat"] .block-container--bg-default .card-section-label,
.template-root[data-brand="beaverton-beat"] .block-container--bg-tint .card-section-label,
.template-root[data-brand="beaverton-beat"] .block-container--bg-default .article-kicker,
.template-root[data-brand="beaverton-beat"] .block-container--bg-tint .article-kicker {
  color: var(--brand-tokens-brand-500);
}

.template-root[data-brand="beaverton-beat"]
  .block-container--bg-default
  .block-menubar__link[aria-current="page"] {
  color: var(--brand-tokens-brand-600);
}

.template-root[data-brand="beaverton-beat"] .block-container--bg-inverted {
  --interactive-text-primary-hover: var(--brand-tokens-brand-200);
  --interactive-text-primary-idle: var(--brand-tokens-brand-200);
  --interactive-text-primary-pressed: var(--brand-tokens-brand-300);
}

/* Keep the branded inverted fill on the header; the CTA uses the neutral fill. */
.template-root[data-brand="beaverton-beat"] .block-container--bg-inverted:has(.block-header) {
  --elevation-fill-inverted-1: var(--brand-tokens-brand-900);

  background-image:
    radial-gradient(
      120% 90% at 82% -10%,
      color-mix(in srgb, var(--brand-tokens-brand-700) 46%, transparent) 0%,
      transparent 66%
    ),
    radial-gradient(
      130% 80% at 50% 122%,
      color-mix(in srgb, var(--brand-tokens-brand-950) 34%, transparent) 0%,
      transparent 72%
    );
}

.template-root[data-brand="beaverton-beat"] .block-container--bg-default:has(.block-menubar) {
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, var(--brand-tokens-brand-400) 12%, transparent) 0%,
    transparent 82%
  );
}

.template-root[data-brand="beaverton-beat"] .block-container--bg-brand {
  background-image: radial-gradient(
    132% 78% at 50% 124%,
    color-mix(in srgb, var(--brand-tokens-brand-900) 22%, transparent) 0%,
    transparent 74%
  );
}