.template-root[data-brand="apollo-beach-ruskin-tribune"] {
  --brand-tokens-brand-50: #f0f7f9;
  --brand-tokens-brand-100: #e1f0f4;
  --brand-tokens-brand-200: #c3e2ea;
  --brand-tokens-brand-300: #8cc9d9;
  --brand-tokens-brand-400: #52b3cb;
  --brand-tokens-brand-500: #257d93;
  --brand-tokens-brand-600: #195b6b;
  --brand-tokens-brand-700: #134a58;
  --brand-tokens-brand-800: #103842;
  --brand-tokens-brand-900: #0c2a31;
  --brand-tokens-brand-950: #091b20;

  --brand-tokens-greyscale-10: #f9fafb;
  --brand-tokens-greyscale-50: #f1f3f4;
  --brand-tokens-greyscale-100: #e6e9ea;
  --brand-tokens-greyscale-200: #d5dadc;
  --brand-tokens-greyscale-300: #b3b9bd;
  --brand-tokens-greyscale-400: #8d969a;
  --brand-tokens-greyscale-500: #626b6f;
  --brand-tokens-greyscale-600: #4d5356;
  --brand-tokens-greyscale-700: #3a3e41;
  --brand-tokens-greyscale-800: #282c2e;
  --brand-tokens-greyscale-900: #1a1d1e;
  --brand-tokens-greyscale-950: #101213;
  --brand-tokens-greyscale-1000: #090b0b;

  --brand-tokens-typography-body: "DM Sans";
  --brand-tokens-typography-labels: "Inter Tight";
  --brand-tokens-typography-titles-a: "Bitter";
  --brand-tokens-typography-titles-b: "Bitter";

  --tint-light: #ecf2f4;
}

.template-root[data-brand="apollo-beach-ruskin-tribune"] .block-container--bg-default,
.template-root[data-brand="apollo-beach-ruskin-tribune"] .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-700);
  --interactive-contained-primary-pressed: var(--brand-tokens-brand-800);
}

.template-root[data-brand="apollo-beach-ruskin-tribune"] .block-container--bg-brand {
  --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="apollo-beach-ruskin-tribune"]
  .block-container--bg-brand:not(:has(.block-menubar)) {
  background-image: linear-gradient(
    to top,
    color-mix(in srgb, var(--brand-tokens-brand-950) 32%, transparent) 0,
    transparent 300px
  );
}

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

/* Hero v2 otherwise pairs its light field with a light text token. */
.template-root[data-brand="apollo-beach-ruskin-tribune"] .block-hero__signup-input {
  color: var(--brand-tokens-greyscale-900);
}