: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);
}

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);
}

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;
}

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;
}

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;
}

/*
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);
}
*/

.theme-toggle {
  position: fixed;
  top: 15px;
  right: 15px;
  z-index: 9999; /* always on top */
  background: var(--color-button);
  border: none;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  font-size: 1.2rem;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  transition: background 0.3s, transform 0.2s;
  -webkit-appearance: none; 
  padding:0;
  line-height: 1;
}

.theme-toggle:hover {
  background: var(--color-button-h);
  transform: scale(1.1);
}