:root, [light]{

  /* brand colors */

  --color-primary: #162636;
  --color-secondary: #267C33;

  --color-surface: #F3F3F3;
  --color-container: #F3F3F3;
  --color-container-low: #d8d8d8cb;
  --color-on-surface: #1C262A;
  --color-on-container: #1C262A;
  --color-on-container-low: #676C70;
  --color-on-container-accent: #162636;
  --color-accent: #162636;
  --color-complementary: #162636;

  --color-on-accent: #f9f9f9;


  --color-interactive: #162636;
  --color-on-interactive: #161515;
  --color-interactive-hover: #162636;
  --color-on-interactive-hover: #161515;
}

[dark] {
  /* surface dark*/
  --color-surface: #000;
  --color-container: #1A1A1A;
  --color-container-low: #383838;
  --color-on-surface: #fff;
  --color-on-container: #f9f9f9;
  --color-on-container-low: #676C70;
  --color-on-container-accent: #162636;

  --color-accent: #f9f9f9;
  --color-on-accent: #f9f9f9;
}

[accent] {
  /* surface dark*/
  --color-surface: #000;
  --color-container: #162636;
  --color-container-low: #383838;
  --color-on-surface: #fff;
  --color-on-container: #f9f9f9;
  --color-on-container-low: #676C70;
  --color-on-container-accent: #162636;

  --color-accent: #162636;
  --color-on-accent: #f9f9f9;
}