/*
  OS Default theme
  - Provides a light theme by default and switches to dark when
    the user's OS preference is dark via `prefers-color-scheme`.
  - Variables are mostly taken from the project's `light.css` and
    `dark.css` and applied consistently to body and form controls.
*/

:root {
  color-scheme: light;

  /* Light palette (defaults) */
  --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;

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

  /* Buttons */
  --btn-fg: var(--fg-2);
  --btn-bg: transparent;
  --btn-bg-active: #9d9da026;
  --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-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);

  /* Menu Button */
  --menu-btn-fg: var(--pr-fg-1);
  --menu-btn-fg-active: var(--pr-fg-2);

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

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

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    /* Dark palette overrides */
    --pr-1: #8fc9ff;
    --pr-2: #43a0f7;
    --pr-3: #298ae5;
    --pr-4: #134190;
    --pr-5: #0f1e39;

    --pr-fg-1: #8fc9ff;
    --pr-fg-2: #43a0f7;
    --pr-bg-1: #0f1e39;
    --pr-bg-2: #134190;

    --ok-1: #90eccf;
    --ok-2: #00a86b;
    --ok-3: #065a45;
    --ok-4: #002e2c;

    --ok-fg-1: #90eccf;
    --ok-fg-2: #00a86b;
    --ok-bg-1: #002e2c;
    --ok-bg-2: #065a45;

    --warn-1: #ffd18f;
    --warn-2: #e8b43b;
    --warn-3: #93631f;
    --warn-4: #3d2a00;

    --warn-fg-1: #ffd18f;
    --warn-fg-2: #ffd18f;
    --warn-bg-1: #3d2a00;
    --warn-bg-2: #93631f;

    --err-1: #ef757d;
    --err-2: #d72e53;
    --err-3: #7b1d31;
    --err-4: #3f1e29;

    --err-fg-1: #ef757d;
    --err-fg-2: #d72e53;
    --err-bg-1: #3f1e29;
    --err-bg-2: #7b1d31;

    --fg-1: #f0f6fc;
    --fg-2: #9198a1;

    --bg-1: #010409;
    --bg-2: #010409;
    --bg-3: #0d1117;
    --bg-4: #151b23;
    --bg-5: #262c36;
    --bg-6: #2a303b;

    --bd-fg: #3d444d;
    --bd: 1px solid var(--bd-fg);

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

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

    --btn-pr-disabled-fg: var(--fg-2);
    --btn-pr-disabled-bg: var(--bg-5);
    --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-2);

    /* Menu Button */
    --menu-btn-fg: var(--pr-fg-2);
    --menu-btn-fg-active: var(--pr-fg-1);

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

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

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

    /* Input */
    --input-fg: var(--fg-1);
    --input-bg: var(--bg-3);
    --input-bg-active: transparent;
    --input-bg-disabled: var(--bg-4);
    --input-fg-placeholder: var(--fg-2);
    --input-bd-fg: var(--bd-fg);

    /* Pill */
    --pill-fg: var(--fg-2);
    --pill-bd-fg: var(--bd-fg);

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

    /* Navbar */
    --navbar-bg: var(--bg-1);
    --navbar-fg: var(--fg-1);
    --navbar-logo-fg: var(--pr-fg-2);
    --navbar-logo-bg: var(--pr-bg-2);
    --navlink-fg: var(--fg-2);
    --navlink-fg-active: var(--pr-fg-2);
    --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(--bg-1);

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

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

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

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

    /* Login */
    --login-img-bg: var(--pr-3);
  }
}

/* Shared layout & control styles */
body {
  background-color: var(--bg-1);
  color: var(--fg-1);
  scrollbar-color: var(--scrollbar-thumb-bg) var(--scrollbar-bg);
  scrollbar-width: thin;
}
body:before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background: inherit;
}

input,
select,
textarea {
  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;
}

input:disabled,
select:disabled,
textarea:disabled {
  background-color: var(--input-bg-disabled);
  color: var(--fg-2);
}

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