body {
  color-scheme: light;

  /* Colors */
  --pr-1: #071040;
  --pr-2: #007dc3;
  --pr-3: #62aee0;
  --pr-4: #cae8f6;
  --pr-5: #e6f7ff;

  --pr-fg-1: #007dc3;
  --pr-fg-2: #071040;
  --pr-bg-1: #e6f7ff;
  --pr-bg-2: #cae8f6;

  --ok-fg-1: #00a86b;
  --ok-fg-2: #065a45;
  --ok-bg-1: #e6f7f2;

  --warn-1: #3d2a00;
  --warn-2: #93631f;
  --warn-3: #e9880a;
  --warn-4: #fff0d5;

  --warn-fg-1: #ffb300;
  --warn-fg-2: #bb7600;
  --warn-bg-1: #fff0d5;
  --warn-bg-2: #ffd18f;

  --err-fg-1: #ea0b3c;
  --err-fg-2: #7b1d31;
  --err-bg-1: #f4e1e1;

  --fg-1: #212121;
  --fg-2: #7d7d80;

  --bg-1: #cccccc;
  --bg-2: #f0f0f0;
  --bg-3: #ffffff;

  /* Border */
  --bd-fg: #9d9da0;
  --bd: 1px solid var(--bd-fg);
  --bd-radius: 5px;
  --bd-radius-lg: 10px;

  /* Button */
  --btn-fg: var(--fg-2);
  --btn-bg: transparent;
  --btn-bg-active: #9d9da026;
  /* --btn-bg-active: var(--bg-2); */
  --btn-bd-fg: var(--bd-fg);

  --btn-pr-fg: var(--bg-3);
  --btn-pr-bg: var(--pr-fg-1);
  --btn-pr-bd-fg: var(--btn-pr-bg);
  --btn-pr-fg-active: var(--btn-pr-fg);
  --btn-pr-bg-active: var(--pr-fg-2);
  --btn-pr-bd-fg-active: var(--btn-pr-bg-active);

  --btn-pr-disabled-fg: var(--btn-pr-fg);
  --btn-pr-disabled-bg: var(--bg-1);
  --btn-pr-disabled-bd-fg: var(--btn-pr-disabled-bg);

  --btn-cancel-fg: var(--btn-fg);
  --btn-cancel-bg: var(--btn-bg);
  --btn-cancel-fg-active: var(--err-fg-1);
  --btn-cancel-bg-active: var(--err-bg-1);

  /* Toggle Button */
  --toggle-pr-fg: var(--pr-fg-1);
  --toggle-pr-bg: var(--pr-bg-2);

  --toggle-warn-fg: var(--warn-fg-2);
  --toggle-warn-bg: var(--warn-bg-1);

  --toggle-err-fg: var(--err-fg-1);
  --toggle-err-bg: var(--err-bg-1);

  /* Input */
  --input-fg: var(--fg-1);
  --input-bg: transparent;
  --input-bg-active: transparent;
  --input-bg-disabled: var(--bg-2);
  --input-fg-placeholder: var(--fg-2);
  --input-bd-fg: var(--bd-fg);
  --input-bd-fg-active: var(--pr-fg-1);
  --input-fz: 0.833rem;
  --label-fz: 0.8rem;

  /* Pill */
  --pill-bg: transparent;
  --pill-fg: var(--fg-2);
  --pill-bd-fg: var(--bd-fg);
  --pill-radius: 100px;

  /* Data Table */
  --dt-bg: var(--bg-2);
  --dt-bd: var(--bd);
  --dt-head-fg: var(--fg-1);
  --dt-head-bg: var(--bg-3);
  --dt-head-bg-hover: var(--bg-2);
  --dt-head-pr-bg: var(--pr-bg-1);
  --dt-head-pr-bg-hover: var(--pr-bg-2);
  --dt-row-fg: var(--fg-1);
  --dt-row-bg: var(--bg-2);
  --dt-row-alt-bg: var(--bg-3);
  --dt-row-bg-hover: var(--pr-bg-2);
  --dt-row-fg-active: var(--pr-fg-1);
  --dt-row-bg-active: var(--pr-bg-2);
  --dt-foot-fg: var(--fg-1);
  --dt-foot-bg: var(--bg-3);
  --dt-controls-bg: var(--bg-3);

  /* Navbar */
  --navbar-fg: var(--fg-1);
  --navbar-bg: var(--bg-3);
  --navbar-logo-fg: var(--pr-fg-1);
  --navbar-logo-bg: var(--pr-fg-2);
  --navlink-fg: var(--fg-2);
  --navlink-fg-active: var(--pr-fg-1);
  --navlink-bg-active: var(--pr-bg-1);

  /* Modal */
  --modal-bg: var(--bg-3);
  --modal-fg: var(--fg-1);
  --modal-bd-fg: var(--bd-fg);
  --modal-overlay-bg: var(--fg-2);

  /* Toast */
  --toast-bg: var(--pr-bg-1);
  --toast-fg: var(--fg-1);
  --toast-bd-fg: var(--pr-fg-1);

  --toast-ok-bg: var(--ok-bg-1);
  --toast-ok-bd-fg: var(--ok-fg-1);

  --toast-err-bg: var(--err-bg-1);
  --toast-err-bd-fg: var(--err-fg-1);

  /* Scrollbar */
  --scrollbar-bg: transparent;
  --scrollbar-thumb-bg: var(--bd-fg);

  /* Login */
  --login-img-bg: var(--pr-fg-1);

  /* Shadow + Glow */
  --shadow:  0 0 5px rgba(0, 0, 0, 0.1);
  --glow:  0 0 5px var(--pr-fg-1);

  /* Styles */

  background-color: var(--bg-3);
  color: var(--fg-1);

  scrollbar-color: var(--scrollbar-thumb-bg) var(--scrollbar-bg);
  scrollbar-width: thin;

  input,
  select {
    color: var(--input-fg);
    background-color: var(--input-bg);
    border: var(--bd);
    border-radius: var(--bd-radius);
    font-size: var(--input-fz);
    font-family: inherit;
    padding: 0.5rem;

    &:disabled {
      background-color: var(--bg-5);
      color: var(--fg-2);
    }
  }

  input::placeholder {
    color: var(--input-fg-placeholder);
  }
}