:root {
  --color-background: #CADCAE;
  --color-card: #E1E9C9;
  --color-button: #EDA35A;
  --color-button-h: #FEE8D9;
  --color-text:black;
  --color-items: var(--color-background);
  --color-text-alt: var(--color-text);
  --color-border: #2222;
  --color-checkbox: var(--color-button-h);
  --color-checkbox-c: var(--color-button);
  --color-table-header: var(--color-checkbox-c);
  --color-table-row: var(--color-items);
  --color-subtable-header: var(--color-checkbox);
  --color-subtable-row: var(--color-card);
  --color-row-hover: var(--color-checkbox);
  --color-row-expanded: var(--color-row-hover);
}

html.terracotta {
  --color-background: #CADCAE;
  --color-card: #E1E9C9;
  --color-button: #EDA35A;
  --color-button-h: #FEE8D9;
  --color-text:black;
  --color-items: var(--color-background);
  --color-text-alt: var(--color-text);
  --color-checkbox: var(--color-button-h);
  --color-checkbox-c: var(--color-button);
  --color-table-header: var(--color-button);
  --color-table-row: var(--color-items);
  --color-subtable-header: var(--color-button);
  --color-subtable-row: var(--color-card);
  --color-row-hover: var(--color-checkbox);
  --color-row-expanded: var(--color-row-hover);
}

html.office-dark {
  --color-background: #819A91;
  --color-card: #A7C1A8;
  --color-button: #D1D8BE;
  --color-button-h: #EEEFE0;
  --color-text:black;
  --color-items: var(--color-background);
  --color-text-alt: var(--color-text);
  --color-checkbox: var(--color-button-h);
  --color-checkbox-c: lightgreen;
  --color-table-header: var(--color-background);
  --color-table-row: var(--color-button);
  --color-subtable-header: var(--color-background);
  --color-subtable-row: var(--color-button);
  --color-row-hover: var(--color-checkbox);
  --color-row-expanded: var(--color-row-hover);
}

html.dark {
  --color-background: #181818;
  --color-card: #212121;
  --color-button: #303030;
  --color-button-h: #838383;
  --color-text: #e8e8e8;
  --color-items: var(--color-background);
  --color-text-alt: var(--color-text);
  --color-checkbox: var(--color-text);
  --color-checkbox-c: lightgreen;
  --color-table-header: var(--color-background);
  --color-table-row: var(--color-button);
  --color-subtable-header: var(--color-background);
  --color-subtable-row: var(--color-button);
  --color-row-hover: var(--color-card);
  --color-row-expanded: var(--color-row-hover);
}

html.office {
  --color-background: white;
  --color-card: lightgray;
  --color-button: white;
  --color-button-h: #DDF6D2;
  --color-text: black;
  --color-items: var(--color-background);
  --color-text-alt: var(--color-text);
  --color-checkbox: var(--color-button);
  --color-checkbox-c: lightgreen;
  --color-table-header: var(--color-background);
  --color-table-row: var(--color-button);
  --color-subtable-header: var(--color-card);
  --color-subtable-row: var(--color-button);
  --color-row-hover: var(--color-card);
  --color-row-expanded: var(--color-row-hover);
}

/*
html.sky {
  --color-background: #DFF2EB;
  --color-card: #B9E5E8;
  --color-button-h: #DDF6D2;
  --color-text: black;
  --color-items: var(--color-background);
  --color-text-alt: var(--color-text);
}

html.lime {
  --color-background: #ecf9e5;
  --color-card: #c9e8be;
  --color-button-h: #DDF6D2;
  --color-text: black;
  --color-items: var(--color-background);
  --color-text-alt: var(--color-text);
}

html.froggy {
  --color-background: #A3DC9A;
  --color-card: #DEE791;
  --color-button: #FFF9BD;
  --color-button-h: #FFD6BA;
  --color-text:black;
  --color-items: var(--color-background);
  --color-text-alt: var(--color-text);
}
*/