[theme="light"],
:root {
  --sys-red: #fe887c;
  --sys-red-dimmed: #ffbab3;
  --sys-orange: #ffb878;
  --sys-orange-dimmed: #fac096;
  --sys-yellow: #fbd75b;
  --sys-yellow-dimmed: #faeaaf;
  --sys-green: #51b748;
  --sys-green-dimmed: #cbe9c8;
  --sys-blue: #999cff;
  --sys-blue-dimmed: #e1e1fe;
  --sys-purple: #dbacff;
  --sys-purple-dimmed: #f4e5fe;
  --sys-gray: #d1d1d1;
  --sys-gray-dimmed: #e1e1e1;

  --sys-teal: #7ae5be;
  --sys-teal-dimmed: #a1e6cc;
}

[theme="dark"] {
  --sys-red-dimmed: #a55f5c;
  --sys-orange-dimmed: #a2816b;
  --sys-yellow-dimmed: #a28f48;
  --sys-green-dimmed: #7ba77c;
  --sys-blue-dimmed: #676ba9;
  --sys-purple-dimmed: #9e97a9;
  --sys-gray-dimmed: #929497;

  --sys-teal-dimmed: #73918a;
}

html, body, :host, :root {
  --black: black;
  --black100: black;
  --black3-opaque: #f7f7f7;
  --black3: rgba(0, 0, 0, 0.03);
  --black6-opaque: #f0f0f0;
  --black6: rgba(0, 0, 0, 0.06);
  --black9-opaque: #e8e8e8;
  --black9: rgba(0, 0, 0, 0.09);
  --black12: rgba(0, 0, 0, 0.12);
  --black12-opaque: #e0e0e0;
  --black16: rgba(0, 0, 0, 0.16);
  --black20: rgba(0, 0, 0, 0.2);
  --black33: rgba(0, 0, 0, 0.33);
  --black50: rgba(0, 0, 0, 0.50);

  --white6: rgba(255, 255, 255, 0.06);
  --white6-opaque: rgba(15, 15, 15);
  --white9: rgba(255, 255, 255, 0.09);
  --white10: rgba(255, 255, 255, 0.10);
  --white12: rgba(255, 255, 255, 0.12);
  --white12-opaque: rgba(31, 31, 31);
  --white20: rgba(255, 255, 255, 0.2);
  --white33: rgba(255, 255, 255, 0.33);
  --white50: rgba(255, 255, 255, 0.5);

  --red: var(--sys-red);
  --orange: var(--sys-orange);
  --yellow: var(--sys-yellow);
  --green: var(--sys-green);
  --blue: var(--sys-blue);
  --purple: var(--sys-purple);
  --gray: var(--sys-gray);
  --teal: var(--sys-teal);

  --red-dimmed: var(--sys-red-dimmed);
  --orange-dimmed: var(--sys-orange-dimmed);
  --yellow-dimmed: var(--sys-yellow-dimmed);
  --green-dimmed: var(--sys-green-dimmed);
  --blue-dimmed: var(--sys-blue-dimmed);
  --purple-dimmed: var(--sys-purple-dimmed);
  --gray-dimmed: var(--sys-gray-dimmed);
  --teal-dimmed: var(--sys-teal-dimmed);
}

html[theme="light"],
html[theme="light"] body,
html[theme="light"] :host,
html[theme="light"] :root,
html,
body,
:host,
:root {
  color-scheme: light;
  --color: black;
  color: var(--color);

  --bg: white;
  --bg-surface: var(--black12);
  --bg-overlay: var(--black20);
  --bg-overlay-dark: var(--black50);
  --bg-overlay-inv: var(--white33);
  --bg-elevated: white;

  --text-pri: #333;
  --text-sec: #555;
  --text-ter: #888;
  --text-pri-on-solid: var(--text-pri);
  --text-sec-on-solid: var(--text-sec);
  --text-ter-on-solid: var(--text-ter);
  --text-pri-inv: white;
  --text-sec-inv: #ddd;
  --text-ter-inv: #a5a5a5;

  --divider: #dadce0;
  --divider-pri: #888;

  --icon-pri: #444;
  --icon-sec: #888;
  --icon-ter: #bbb;

  /* TODO: migrate */

  --primary-text-color: #333;
  --secondary-text-color: #555;
  --tertiary-text-color: #888;
  --tertiary-text-color-on-solid: #888;
  --inverse-text-color: white;
  --inverse-secondary-text-color: #ddd;

  --code-text-color: #4f559c;
  --code-caret-color: #111;

  --primary-icon-color: #444;
  --secondary-icon-color: #888;
  --tertiary-icon-color: #bbb;

  --selected-color: var(--black12);
  --selected-color-opaque: var(--black12-opaque);
  --hover-color: var(--black6);
  --hover-color-light: var(--black6);
  --hover-color-very-light: var(--black3);
  --hover-color-opaque: var(--black6-opaque);
  --hover-color-opaque-very-light: var(--black3-opaque);

  --primary-button-background-color: #444;
  --secondary-button-background-color: var(--black6);
  --secondary-button-opaque-background-color: var(--black6-opaque);

  --card-background-color: var(--black6);
  --opaque-card-color: #ccc;
  --background-color: white;

  --box-shadow: 0px 0px 6px 3px var(--black12);
  --box-shadow-light: 0px 0px 3px 2px var(--black9);
  --box-shadow-very-light: 0px 1px 2px 2px var(--black3);

  --modal-box-shadow:
    rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, var(
    --black12
  ) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, var(--black9) 0px -3px 5px;
  --modal-background-color: white;

  --event-item-shadow: 0px 0px 5px 1px var(--black33);
}

html[theme="dark"],
html[theme="dark"] body,
html[theme="dark"] :host,
html[theme="dark"] :root /* , html[theme="dark"] *  */ {
  color-scheme: dark;
  --color: white;
  color: var(--color);

  --bg: #1e222c;
  --bg-surface: var(--white12);
  --bg-overlay: var(--black50);
  --bg-overlay-dark: var(--black50);
  --bg-overlay-inv: var(--black50);
  --bg-elevated: #2a3342;

  --text-pri: white;
  --text-sec: #ddd;
  --text-ter: #a5a5a5;
  --text-pri-on-solid: var(--bg);
  --text-sec-on-solid: var(--bg);
  --text-ter-on-solid: var(--bg);
  --text-pri-inv: #333;
  --text-sec-inv: #555;
  --text-ter-inv: #888;

  --divider: #444;
  --divider-pri: #777;

  --icon-pri: white;
  --icon-sec: #a5a5a5;
  --icon-ter: #666;

  /* TODO: migrate */

  --primary-text-color: var(--color);
  --secondary-text-color: #ddd;
  --tertiary-text-color: #a5a5a5;

  --inverse-text-color: black;
  --tertiary-text-color-on-solid: #222;
  --inverse-secondary-text-color: #ddd;

  --code-text-color: #9bdcfe;
  --code-caret-color: white;

  --primary-icon-color: white;
  --secondary-icon-color: #a5a5a5;
  --tertiary-icon-color: #666;

  --selected-color: var(--white12);
  --selected-color-opaque: var(--white12-opaque);
  --hover-color: var(--white12);
  --hover-color-light: var(--white10);
  --hover-color-very-light: var(--white6);
  --hover-color-opaque: var(--white12-opaque);
  --hover-color-opaque-very-light: var(--white6-opaque);

  --primary-button-background-color: #a5a5a5;
  --secondary-button-background-color: var(--white6);
  --secondary-button-opaque-background-color: var(--white6-opaque);

  --card-background-color: var(--white6);
  --background-color: #1e222c;

  --modal-box-shadow: 0px 1px 4px 1px rgb(0 0 0 / 50%);
  --modal-background-color: #2a3342;

}