.template-root[data-brand="theme-4"] {
  /* color */
  --brand-tokens-brand-100: #f3f6fe;
  --brand-tokens-brand-200: #9fc2fa;
  --brand-tokens-brand-300: #073989;
  --brand-tokens-brand-400: #0949b0;
  --brand-tokens-brand-50: #ffffff;
  --brand-tokens-brand-500: #0b5ad6;
  --brand-tokens-brand-600: #176cf3;
  --brand-tokens-brand-700: #3e85f5;
  --brand-tokens-brand-800: #659df7;
  --brand-tokens-brand-900: #9fc2fa;
  --brand-tokens-brand-950: #ffffff;
  --brand-tokens-greyscale-10: #ffffff;
  --brand-tokens-greyscale-100: #8bb6f9;
  --brand-tokens-greyscale-1000: #000000;
  --brand-tokens-greyscale-200: #659df7;
  --brand-tokens-greyscale-300: #3e85f5;
  --brand-tokens-greyscale-400: #176cf3;
  --brand-tokens-greyscale-50: #9fc2fa;
  --brand-tokens-greyscale-500: #0b5ad6;
  --brand-tokens-greyscale-600: #0949b0;
  --brand-tokens-greyscale-700: #073989;
  --brand-tokens-greyscale-800: #052962;
  --brand-tokens-greyscale-900: #02132d;
  --brand-tokens-greyscale-950: #010812;
  /* string */
  --brand-tokens-typography-body: "Google Sans Flex";
  --brand-tokens-typography-labels: "Google Sans Flex";
  --brand-tokens-typography-titles-a: "Gloock";
  --brand-tokens-typography-titles-b: "Gloock";
  /* tint (hand-authored, moved from render/styles/tint.css) */
  /* Ramp jumps from white (50/100 ≈ page) to saturated (200) — mix a pastel. */
  --tint-light: color-mix(
  in srgb,
  var(--brand-tokens-brand-200) 35%,
  var(--brand-tokens-greyscale-10)
  );
}