.template-root[data-brand="south-bay-tide"] {
  --brand-tokens-brand-50: #e6fbff;
  --brand-tokens-brand-100: #c2f5ff;
  --brand-tokens-brand-200: #88ebff;
  --brand-tokens-brand-300: #42dcfa;
  --brand-tokens-brand-400: #06c8ef;
  --brand-tokens-brand-500: #12a6c8;
  --brand-tokens-brand-600: #0d8aa8;
  --brand-tokens-brand-700: #0a6e87;
  --brand-tokens-brand-800: #08596d;
  --brand-tokens-brand-900: #064351;
  --brand-tokens-brand-950: #032b34;
  --brand-tokens-greyscale-10: #ffffff;
  --brand-tokens-greyscale-50: #f7f7f7;
  --brand-tokens-greyscale-100: #ededed;
  --brand-tokens-greyscale-200: #d9d9d9;
  --brand-tokens-greyscale-300: #b8b8b8;
  --brand-tokens-greyscale-400: #949494;
  --brand-tokens-greyscale-500: #575757;
  --brand-tokens-greyscale-600: #4a4a4a;
  --brand-tokens-greyscale-700: #3a3a3a;
  --brand-tokens-greyscale-800: #292929;
  --brand-tokens-greyscale-900: #171717;
  --brand-tokens-greyscale-950: #0f0f0f;
  --brand-tokens-greyscale-1000: #070707;
  --brand-tokens-typography-body: "Merriweather";
  --brand-tokens-typography-labels: "DM Sans";
  --brand-tokens-typography-titles-a: "Barlow Semi Condensed";
  --brand-tokens-typography-titles-b: "Barlow Semi Condensed";
  --tint-light: #f2f2f2;
  --accent-signal: #06c8ef;
}

.template-root[data-brand="south-bay-tide"] .block-section-title {
  letter-spacing: 0.08em;
}

.template-root[data-brand="south-bay-tide"] .block-container--bg-default .block-section-title--v3 {
  border-bottom-color: var(--brand-tokens-brand-600);
}
.template-root[data-brand="south-bay-tide"] .block-quick-hits__label,
.template-root[data-brand="south-bay-tide"] .block-container--bg-default .card-section-label {
  color: var(--brand-tokens-brand-700);
}
.template-root[data-brand="south-bay-tide"][data-color-scheme="light"] {
  --interactive-text-primary-idle: var(--brand-tokens-brand-700);
  --text-default-4: var(--brand-tokens-brand-700);
}

.template-root[data-brand="south-bay-tide"] .block-container--bg-inverted .card-section-label {
  color: var(--accent-signal);
}

.template-root[data-brand="south-bay-tide"] .block-container--bg-default:has(.block-header) {
  background-image:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--brand-tokens-greyscale-100) 90%, transparent) 0%,
      transparent 44%
    ),
    radial-gradient(
      124% 70% at 50% 126%,
      color-mix(in srgb, var(--accent-signal) 22%, transparent) 0%,
      transparent 66%
    );
}