.template-root[data-brand="millcreek-times"] {
  --brand-tokens-brand-50: #f2effb;
  --brand-tokens-brand-100: #e8e2f8;
  --brand-tokens-brand-200: #d5caf2;
  --brand-tokens-brand-300: #b8a6e7;
  --brand-tokens-brand-400: #9d85e0;
  --brand-tokens-brand-500: #5019e6;
  --brand-tokens-brand-600: #3f17ab;
  --brand-tokens-brand-700: #37188b;
  --brand-tokens-brand-800: #2a1467;
  --brand-tokens-brand-900: #1e1047;
  --brand-tokens-brand-950: #140c2c;

  --brand-tokens-greyscale-10: #f9fafa;
  --brand-tokens-greyscale-50: #f1f3f3;
  --brand-tokens-greyscale-100: #e7e9e9;
  --brand-tokens-greyscale-200: #d7d9db;
  --brand-tokens-greyscale-300: #b1b6b9;
  --brand-tokens-greyscale-400: #8d9396;
  --brand-tokens-greyscale-500: #61676b;
  --brand-tokens-greyscale-600: #4b5053;
  --brand-tokens-greyscale-700: #383b3e;
  --brand-tokens-greyscale-800: #26292b;
  --brand-tokens-greyscale-900: #171a1c;
  --brand-tokens-greyscale-950: #0e1011;
  --brand-tokens-greyscale-1000: #070808;

  --brand-tokens-typography-body: "Lora";
  --brand-tokens-typography-labels: "Manrope";
  --brand-tokens-typography-titles-a: "Elms Sans";
  --brand-tokens-typography-titles-b: "Elms Sans";

  --tint-light: #eee8f7;
}

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

  --interactive-contained-primary-hover: var(--brand-tokens-brand-500);
  --interactive-contained-primary-pressed: var(--brand-tokens-brand-700);
}

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

.template-root[data-brand="millcreek-times"] .block-container--bg-brand:not(:has(.block-footer)) {
  background-image: linear-gradient(
    to top,
    color-mix(in srgb, var(--brand-tokens-brand-950) 30%, transparent) 0,
    transparent 300px
  );
}

.template-root[data-brand="millcreek-times"] .block-container--bg-brand .block-cta__button,
.template-root[data-brand="millcreek-times"] .block-container--bg-inverted .block-cta__button {
  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="millcreek-times"] .block-container--bg-brand .block-cta__button:hover,
.template-root[data-brand="millcreek-times"]
  .block-container--bg-inverted
  .block-cta__button:hover {
  background: var(--brand-tokens-brand-200);
  background-color: var(--brand-tokens-brand-200);
  border-color: var(--brand-tokens-brand-200);
  color: var(--brand-tokens-greyscale-900);
  opacity: 1;
}

/* Painted containers otherwise render typed input text on the field's light fill. */
.template-root[data-brand="millcreek-times"] .block-container--bg-brand .block-cta__input,
.template-root[data-brand="millcreek-times"] .block-container--bg-inverted .block-cta__input {
  color: var(--brand-tokens-greyscale-900);
}

/* The shared button fill does not separate from this painted surface. */
.template-root[data-brand="millcreek-times"]
  .block-container--bg-inverted
  .block-header__subscribe-btn {
  background: var(--brand-tokens-brand-300);
  background-color: var(--brand-tokens-brand-300);
  border-color: var(--brand-tokens-brand-300);
  color: var(--brand-tokens-greyscale-900);
}

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