/*
font
minify
*/
:root {
  --font: YellowCircle8, sans-serif, sans;
  --primary: #0c6780;
  --on-primary: #ffffff;
  --primary-container: #baeaff;
  --on-primary-container: #004d62;
  --secondary: #4c626b;
  --on-secondary: #ffffff;
  --secondary-container: #cfe6f1;
  --on-secondary-container: #354a53;
  --tertiary: #3e6837;
  --on-tertiary: #ffffff;
  --tertiary-container: #bff0b1;
  --on-tertiary-container: #275021;
  --error: #904b3d;
  --on-error: #ffffff;
  --error-container: #ffdad3;
  --on-error-container: #733428;
  --background: #ffffff;
  --on-background: #181c20;
  --surface: #f7f9ff;
  --on-surface: #181c20;
  --surface-variant: #ebeef3;
  --on-surface-variant: #404943;
  --outline: #707973;
  --outline-variant: #c0c9c1;
  --shadow: #000000;
  --scrim: #000000;
  --inverse-surface: #2d3135;
  --inverse-on-surface: #eef1f6;
  --inverse-primary: #89d0ed;
  --surface-dim: #d7dadf;
  --surface-bright: #f7f9ff;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #f1f4f9;
  --surface-container: #ebeef3;
  --surface-container-high: #e6e8ee;
  --surface-container-highest: #e0e2e8;
}

@media (prefers-color-scheme: dark) {
  :root {
  --primary: #89d0ed;
  --on-primary: #003544;
  --primary-container: #004d62;
  --on-primary-container: #baeaff;
  --secondary: #b3cad5;
  --on-secondary: #1e333c;
  --secondary-container: #354a53;
  --on-secondary-container: #cfe6f1;
  --tertiary: #a4d397;
  --on-tertiary: #0f380d;
  --tertiary-container: #275021;
  --on-tertiary-container: #bff0b1;
  --error: #ffb4a5;
  --on-error: #561e14;
  --error-container: #733428;
  --on-error-container: #ffdad3;
  --background: #000000;
  --on-background: #e0e2e8;
  --surface: #101418;
  --on-surface: #e0e2e8;
  --surface-variant: #1c2024;
  --on-surface-variant: #c0c9c1;
  --outline: #8a938c;
  --outline-variant: #404943;
  --shadow: #000000;
  --scrim: #000000;
  --inverse-surface: #e0e2e8;
  --inverse-on-surface: #2d3135;
  --inverse-primary: #0c6780;
  --surface-dim: #101418;
  --surface-bright: #363a3e;
  --surface-container-lowest: #0b0f12;
  --surface-container-low: #181c20;
  --surface-container: #1c2024;
  --surface-container-high: #272a2e;
  --surface-container-highest: #313539;
  }
}

.squircle {
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  /* TODO squircle from bimba logo */
  mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMjAwJyBoZWlnaHQ9JzIwMCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBkPSdNMTAwIDBDMjAgMCAwIDIwIDAgMTAwczIwIDEwMCAxMDAgMTAwIDEwMC0yMCAxMDAtMTAwUzE4MCAwIDEwMCAwWicvPjwvc3ZnPg==);
}

.on-surface {
  background-color: var(--on-surface);
}
.on-surface-variant {
  background-color: var(--on-surface-variant);
}