.template-root[data-brand="theme-9"] {
  /* color */
  --brand-tokens-brand-100: #c5d4e4;
  --brand-tokens-brand-200: #9eb8d3;
  --brand-tokens-brand-300: #6e97be;
  --brand-tokens-brand-400: #3e78aa;
  --brand-tokens-brand-50: #e8eef4;
  --brand-tokens-brand-500: #2e8fce;
  --brand-tokens-brand-600: #0076bc;
  --brand-tokens-brand-700: #004a78;
  --brand-tokens-brand-800: #001c33;
  --brand-tokens-brand-900: #00233b;
  --brand-tokens-brand-950: #000d19;
  --brand-tokens-greyscale-10: #f8f9fa;
  --brand-tokens-greyscale-100: #e2e6ea;
  --brand-tokens-greyscale-1000: #000000;
  --brand-tokens-greyscale-200: #c8cdd3;
  --brand-tokens-greyscale-300: #a0a8b2;
  --brand-tokens-greyscale-400: #77808c;
  --brand-tokens-greyscale-50: #f0f2f4;
  --brand-tokens-greyscale-500: #555f6b;
  --brand-tokens-greyscale-600: #00233b;
  --brand-tokens-greyscale-700: #252d36;
  --brand-tokens-greyscale-800: #141a20;
  --brand-tokens-greyscale-900: #0c1017;
  --brand-tokens-greyscale-950: #131313;
  /* string */
  --brand-tokens-typography-body: "Google Sans Flex";
  --brand-tokens-typography-labels: "Google Sans Flex";
  --brand-tokens-typography-titles-a: "Elms Sans";
  --brand-tokens-typography-titles-b: "Google Sans Flex";
  /* tint (hand-authored, moved from render/styles/tint.css) */
  --tint-light: var(--brand-tokens-brand-50); /* #e8eef4 quiet steel wash */
}