:root {
  --brand-color: #00c8d2;
  --brand-rgb: 0, 200, 210;
  --brand-hue: 182;
  --accessible-color: #ffffff;
  --accent-color: #ffcc28;
  --interactive-color: #f55a00;
  --background-hue: 182;
  --background-saturation: 5%;

  
  --surface-primary-default: light-dark(#F55A00, #C44800);
  --surface-primary-default-hover: light-dark(#C44800, #F55A00);
  --surface-primary-default-active: light-dark(#933600, #F77B33);
  --surface-primary-subtle: light-dark(#FEEEE5, #622400);
  --surface-primary-subtle-hover: light-dark(#fddecc, #933600);
  --surface-primary-subtle-active: light-dark(#fbbd99, #c44800);
  
}