:root, [light]{

  /* brand colors */

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

  --color-surface: #E7E7E7;
  --color-container: #fff6f6;
  
  --color-on-surface: #000;
  --color-on-container: #000;


  --color-surface: #F9ECE0;
  --color-container: #F9ECE0;
  --color-container-low: #d8d8d8cb;
  --color-on-surface: #1C262A;
  --color-on-container: #1C262A;
  --color-on-container-low: #676C70;
  --color-on-container-accent: #FF780C;
  --color-accent: #FF780C;
  --color-complementary: #B29660;

  --color-on-accent: #f9f9f9;


  --color-interactive: #FF931E;
  --color-on-interactive: #161515;
  --color-interactive-hover: #d36d01;
  --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: #FF780C;

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

[primary] {
  /* surface dark*/
  --color-surface: #000;
  --color-container: var(--color-primary);
  --color-container-low: #383838;
  --color-on-surface: #fff;
  --color-on-container: #f9f9f9;
  --color-on-container-low: #676C70;
  --color-on-container-accent: #FF780C;

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

[secondary] {
  /* surface dark*/
  --color-surface: #000;
  --color-container: var(--color-secondary);
  --color-container-low: #383838;
  --color-on-surface: #fff;
  --color-on-container: #f9f9f9;
  --color-on-container-low: #676C70;
  --color-on-container-accent: #FF780C;

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




[meia-noite]{
  --color-surface: #1C262A;
  --color-container: #1C262A;
  --color-on-surface: #B29660;
  --color-on-container: #B29660;
  --color-accent: #FF780C;
}
[laranja]{
  --color-surface: #FF780C;
  --color-container: #FF780C;
  --color-on-surface: #1C262A;
  --color-on-container: #1C262A;
  --color-accent: #FFE8BC;
}
[branco]{
  --color-surface: #F9ECE0;
  --color-container: #F9ECE0;
  --color-on-surface: #1C262A;
  --color-on-container: #1C262A;
  --color-accent: #FF780C;
  --color-complementary: #B29660;
}
[ouro-velho]{
  --color-surface: #B29660;
  --color-container: #FFE8BC;
  --color-on-surface: #1C262A;
  --color-on-container: #1C262A;
  --color-accent: #FFFFFF;
}