.template-root[data-brand="rose-city-beat"] {
  --brand-tokens-brand-50: #fceef2;
  --brand-tokens-brand-100: #f9dce5;
  --brand-tokens-brand-200: #f5b7ca;
  --brand-tokens-brand-300: #f089a8;
  --brand-tokens-brand-400: #ed5a86;
  --brand-tokens-brand-500: #ec3c71;
  --brand-tokens-brand-600: #e9205c;
  --brand-tokens-brand-700: #851436;
  --brand-tokens-brand-800: #670e29;
  --brand-tokens-brand-900: #4d0a1e;
  --brand-tokens-brand-950: #320613;

  --brand-tokens-greyscale-10: #fcfcfd;
  --brand-tokens-greyscale-50: #f6f7f9;
  --brand-tokens-greyscale-100: #ebecf0;
  --brand-tokens-greyscale-200: #d7d9e0;
  --brand-tokens-greyscale-300: #b0b4bf;
  --brand-tokens-greyscale-400: #898f9f;
  --brand-tokens-greyscale-500: #5b6071;
  --brand-tokens-greyscale-600: #484d5b;
  --brand-tokens-greyscale-700: #373c48;
  --brand-tokens-greyscale-800: #252831;
  --brand-tokens-greyscale-900: #181a21;
  --brand-tokens-greyscale-950: #0f1015;
  --brand-tokens-greyscale-1000: #08090c;
  --brand-tokens-typography-body: "Manrope";
  --brand-tokens-typography-labels: "Manrope";
  --brand-tokens-typography-titles-a: "Instrument Serif";
  --brand-tokens-typography-titles-b: "Instrument Serif";
  --tint-light: #f6eef1;

  --rose-mark: #d01d52;
}

.template-root[data-brand="rose-city-beat"] .block-section-title {
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.template-root[data-brand="rose-city-beat"] {
  --text-default-4: var(--rose-mark);
  --interactive-text-primary-idle: var(--rose-mark);
  --interactive-text-primary-pressed: var(--rose-mark);
  --interactive-text-primary-hover: var(--brand-tokens-brand-800);

  --interactive-contained-primary-idle: var(--rose-mark);
  --interactive-contained-primary-hover: var(--brand-tokens-brand-700);
  --interactive-contained-primary-pressed: var(--brand-tokens-brand-800);
}

/* Painted Containers remap text tokens, but not interactive accent tokens. */
.template-root[data-brand="rose-city-beat"] .block-container--bg-brand,
.template-root[data-brand="rose-city-beat"] .block-container--bg-inverted {
  --interactive-text-primary-idle: var(--brand-tokens-brand-200);
  --interactive-text-primary-pressed: var(--brand-tokens-brand-200);
  --interactive-text-primary-hover: var(--brand-tokens-brand-100);
}

.template-root[data-brand="rose-city-beat"] .block-container--bg-brand:has(.block-header) {
  --interactive-text-primary-idle: var(--brand-tokens-greyscale-10);
  --interactive-text-primary-pressed: var(--brand-tokens-greyscale-10);
  --interactive-text-primary-hover: var(--brand-tokens-greyscale-10);
}

.template-root[data-brand="rose-city-beat"] .block-container--bg-default .card-section-label,
.template-root[data-brand="rose-city-beat"] .block-container--bg-tint .card-section-label {
  color: var(--rose-mark);
}

.template-root[data-brand="rose-city-beat"]
  .block-container--bg-default
  .block-section-title__square,
.template-root[data-brand="rose-city-beat"] .block-container--bg-tint .block-section-title__square {
  background-color: var(--rose-mark);
}

.template-root[data-brand="rose-city-beat"] .block-container--bg-default .block-quick-hits__label {
  color: var(--rose-mark);
}

.template-root[data-brand="rose-city-beat"] .block-container--bg-brand:has(.block-header) {
  background-color: var(--brand-tokens-brand-600);
  background-image:
    radial-gradient(
      70% 120% at 88% -10%,
      color-mix(in srgb, var(--brand-tokens-greyscale-10) 8%, transparent) 0%,
      transparent 62%
    ),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--brand-tokens-brand-800) 15%, transparent) 0%,
      color-mix(in srgb, var(--brand-tokens-brand-800) 60%, transparent) 100%
    );
}

.template-root[data-brand="rose-city-beat"] .block-container--bg-inverted:has(.block-menubar) {
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, var(--brand-tokens-brand-600) 50%, transparent) 0%,
    color-mix(in srgb, var(--brand-tokens-brand-600) 20%, transparent) 100%
  );
}

/* Cta.css sets this fill directly, so the element needs the surface override. */
.template-root[data-brand="rose-city-beat"] .block-container--bg-brand .block-cta__button {
  background: var(--brand-tokens-greyscale-10);
  border-color: var(--brand-tokens-greyscale-10);
  color: var(--brand-tokens-brand-800);
}

.template-root[data-brand="rose-city-beat"] .block-container--bg-brand .block-cta__button:hover {
  background: var(--brand-tokens-brand-100);
  border-color: var(--brand-tokens-brand-100);
  color: var(--brand-tokens-brand-800);
  opacity: 1;
}

.template-root[data-brand="rose-city-beat"] .block-container--bg-brand .block-cta__button:active {
  background: var(--brand-tokens-brand-200);
  border-color: var(--brand-tokens-brand-200);
  color: var(--brand-tokens-brand-800);
  opacity: 1;
}

.template-root[data-brand="rose-city-beat"] .block-container--bg-brand:not(:has(.block-header)) {
  background-image: radial-gradient(
    120% 90% at 50% 118%,
    color-mix(in srgb, var(--brand-tokens-brand-900) 22%, transparent) 0%,
    transparent 64%
  );
}

/* Instrument Serif ships at 400; this prevents synthesized bold in the hero. */
.template-root[data-brand="rose-city-beat"] .block-hero__lead-title {
  font-family: var(--brand-tokens-typography-titles-a), serif;
  font-size: 52px;
  line-height: 56px;
  font-weight: 400;
  letter-spacing: -0.01em;
}

@media (max-width: 767px) {
  /* The fixed desktop size bypasses the shared mobile title token. */
  .template-root[data-brand="rose-city-beat"] .block-hero__lead-title {
    font-size: 34px;
    line-height: 38px;
  }
}