.template-root[data-brand="theme-11"] {
  /* color */
  --brand-tokens-brand-100: #edf8ff;
  --brand-tokens-brand-200: #def1ff;
  --brand-tokens-brand-300: #c4e4ff;
  --brand-tokens-brand-400: #a6d1ff;
  --brand-tokens-brand-50: #f8fdff;
  --brand-tokens-brand-500: #4475bd;
  --brand-tokens-brand-600: #335b97;
  --brand-tokens-brand-700: #24436f;
  --brand-tokens-brand-800: #172c4b;
  --brand-tokens-brand-900: #172c4b;
  --brand-tokens-brand-950: #0d1b2f;
  --brand-tokens-greyscale-10: #f8f9fa;
  --brand-tokens-greyscale-100: #e1e9ef;
  --brand-tokens-greyscale-1000: #0e1316;
  --brand-tokens-greyscale-200: #ced8e0;
  --brand-tokens-greyscale-300: #b6c2cb;
  --brand-tokens-greyscale-400: #96a2ac;
  --brand-tokens-greyscale-50: #edf3f8;
  --brand-tokens-greyscale-500: #75828c;
  --brand-tokens-greyscale-600: #59656e;
  --brand-tokens-greyscale-700: #414b53;
  --brand-tokens-greyscale-800: #2c353b;
  --brand-tokens-greyscale-900: #092247;
  --brand-tokens-greyscale-950: #0e1316;
  /* string */
  --brand-tokens-typography-body: "Google Sans Flex";
  --brand-tokens-typography-labels: "Google Sans Flex";
  --brand-tokens-typography-titles-a: "Playfair Display";
  --brand-tokens-typography-titles-b: "Playfair Display";
  /* tint (hand-authored, moved from render/styles/tint.css) */
  --tint-light: var(--brand-tokens-brand-200); /* #def1ff sky (100 is near-page) */
}