:root {
  --bgColor: "color(color-15)";
  --titleFontStyle: "font({theme: 'Body-M', size: '30px'})";
  --buttonBackgroundColor: "color(color-8)";
  --buttonBorderColor: "color(color-16)";
  --buttonTextColor: "color(color-15)";
  --buttonTextFont: "font({theme: 'Body-M', size: '22px', weight: 'bold'})";
  --buttonBorderSize: "number(0)";
  --paragraphWidth: "number(50)";
  /* a11y contrast vars */
  --textColor: #DFF0D8;
  --badBGColor: #468847;
  --goodBGColor: #3C743D; }

body {
  color: "color(color-1)";
  background-color: "color(--bgColor)";
  font: "font({theme: 'Body-M', size: '16px', weight: 'bold'})"; }

h1 {
  font: "font(--titleFontStyle)"; }

h2[data-hook=bad-contrast-text] {
  color: "color(--textColor)";
  background-color: "smartBGContrast(color(--textColor), color(--badBGColor))"; }

h2[data-hook=good-contrast-text] {
  background-color: "smartBGContrast(color(--textColor), color(--goodBGColor))"; }

p[data-hook=text] {
  width: "unit(--paragraphWidth, %)"; }

button {
  outline: none;
  background-color: "color(--buttonBackgroundColor)";
  font: "font(--buttonTextFont)";
  color: "color(--buttonTextColor)";
  border: "unit(--buttonBorderSize, px)" solid "color(--buttonBorderColor)";
  border-radius: "unit(--buttonBorderSize, px)";
  width: 250px;
  text-align: "string(--buttonAlignment)"; }