:root {
  /* Custom */
  --eox-body-font-family: Inter, Roboto, "Helvetica Neue", "Arial Nova",
    "Nimbus Sans", Noto Sans, Arial, sans-serif;
  --eox-header-font-family: var(--eox-body-font-family);

  /* BeerCSS */
  --size: 1rem;
  --font: var(--eox-body-font-family);
  --font-icon: "Material Symbols Subset";
  --speed1: 0.1s;
  --speed2: 0.2s;
  --speed3: 0.3s;
  --speed4: 0.4s;
  --active: rgb(128 128 128 / 0.192);
  --overlay: rgb(0 0 0 / 0.5);
  --elevate1: 0 0.125rem 0.125rem 0 rgb(0 0 0 / 0.32);
  --elevate2: 0 0.25rem 0.5rem 0 rgb(0 0 0 / 0.4);
  --elevate3: 0 0.375rem 0.75rem 0 rgb(0 0 0 / 0.48);
  --top: env(safe-area-inset-top);
  --bottom: env(safe-area-inset-bottom);
  --left: env(safe-area-inset-left);
  --right: env(safe-area-inset-right);
}

* {
  font-family: var(--eox-body-font-family);
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--eox-header-font-family);
}

:root,
body.light {
  --primary: rgb(var(--eox-theme-light-primary));
  --on-primary: rgb(var(--eox-theme-light-on-primary));
  --primary-container: rgb(var(--eox-theme-light-primary-container));
  --on-primary-container: #001d36;
  --secondary: rgb(var(--eox-theme-light-secondary));
  --on-secondary: rgb(var(--eox-theme-light-on-secondary));
  --secondary-container: #d7e3f7;
  --on-secondary-container: #101c2b;
  --tertiary: rgb(var(--eox-theme-light-tertiary));
  --on-tertiary: rgb(var(--eox-theme-light-on-tertiary));
  --tertiary-container: #f2daff;
  --on-tertiary-container: #251431;
  --error: rgb(var(--eox-theme-light-error));
  --on-error: rgb(var(--eox-theme-light-on-error));
  --error-container: #ffdad6;
  --on-error-container: #410002;
  --background: rgb(var(--eox-theme-light-background));
  --on-background: #1a1c1e;
  --surface: rgb(var(--eox-theme-light-surface));
  --on-surface: rgb(var(--eox-theme-light-on-surface));
  --surface-variant: #dfe2eb;
  --on-surface-variant: #43474e;
  --outline: rgb(var(--eox-theme-light-outline));
  --outline-variant: rgb(var(--eox-theme-light-outline-variant));
  --shadow: #000000;
  --scrim: #000000;
  --inverse-surface: #2f3033;
  --inverse-on-surface: #f1f0f4;
  --inverse-primary: #9ecaff;
  --surface-dim: rgb(var(--eox-theme-light-surface-dim));
  --surface-bright: rgb(var(--eox-theme-light-surface-bright));
  --surface-container-lowest: #ffffff;
  --surface-container-low: #f4f3f7;
  --surface-container: #eeedf1;
  --surface-container-high: #e8e8eb;
  --surface-container-highest: #e2e2e6;
}
body.dark {
  --primary: rgb(var(--eox-theme-dark-primary));
  --on-primary: rgb(var(--eox-theme-dark-on-primary));
  --primary-container: rgb(var(--eox-theme-dark-primary-container));
  --on-primary-container: #d1e4ff;
  --secondary: rgb(var(--eox-theme-dark-secondary));
  --secondary-container: #3b4858;
  --on-secondary-container: #d7e3f7;
  --on-secondary-container: rgb(var(--eox-theme-dark-on-secondary-container));
  --tertiary: rgb(var(--eox-theme-dark-tertiary));
  --on-tertiary: rgb(var(--eox-theme-dark-on-tertiary));
  --tertiary-container: #523f5f;
  --on-tertiary-container: #f2daff;
  --error: rgb(var(--eox-theme-dark-error));
  --on-error: rgb(var(--eox-theme-dark-on-error));
  --error-container: #93000a;
  --on-error-container: #ffb4ab;
  --background: rgb(var(--eox-theme-dark-background));
  --on-background: #e2e2e6;
  --surface: rgb(var(--eox-theme-dark-surface));
  --on-surface: rgb(var(--eox-theme-dark-on-surface));
  --surface-variant: #43474e;
  --on-surface-variant: #c3c7cf;
  --outline: rgb(var(--eox-theme-dark-outline));
  --outline-variant: rgb(var(--eox-theme-dark-outline-variant));
  --shadow: #000000;
  --scrim: #000000;
  --inverse-surface: #e2e2e6;
  --inverse-on-surface: #2f3033;
  --inverse-primary: #0161a3;
  --surface-dim: rgb(var(--eox-theme-dark-surface-dim));
  --surface-bright: rgb(var(--eox-theme-dark-surface-bright));
  --surface-container-lowest: #0d0e11;
  --surface-container-low: #1a1c1e;
  --surface-container: #1e2022;
  --surface-container-high: #282a2d;
  --surface-container-highest: #333538;
}