/* DEFAULT: LIGHT MODE */

:root {
  color-scheme: light;

  --page: #fdfdfc;
  --ink: #111111;
  --muted: #777777;

  --panel: #ffffff;
  --panel-line: #dededa;
  --area: #f5f6f8;

  --button-bg: #000000;
  --button-text: #ffffff;
  --button-hover: #777777;
  --button-focus: #777777;

  --disabled: #f1f1f1;
  --disabled-text: #bdbdbd;

  --slot: #e6e6e3;
  --hover: #333333;

  --capsule-bg: #000000;
  --capsule-text: #ffffff;
  --capsule-number: #999996;

  --popup-bg: #ffffff;
  --popup-line: #d9d9d5;
  --popup-text: #333330;

  --helper: #a3a3a0;
  --note: #8b8b88;

  --shadow: rgba(0, 0, 0, 0.045);
  --popup-shadow: rgba(0, 0, 0, 0.10);

  --background-image: url("assets/images/site_light.png");
    --card-bg: #ffffff;
}

/* AUTOMATIC DARK MODE */

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

    --page: #111214;
    --ink: #f5f5f5;
    --muted: #a1a1a8;

    --panel: #1a1b1e;
    --panel-line: #343539;
    --area: #242529;

    --button-bg: #ffffff;
    --button-text: #111111;
    --button-hover: #a8a8ad;
    --button-focus: #a1a1a8;

    --disabled: #303136;
    --disabled-text: #85858a;

    --slot: #303136;
    --hover: #cfcfd4;

    --capsule-bg: #f5f5f5;
    --capsule-text: #111111;
    --capsule-number: #6b6b70;

    --popup-bg: #26272b;
    --popup-line: #3a3b40;
    --popup-text: #e4e4e7;

    --helper: #85858a;
    --note: #85858a;

    --shadow: rgba(0, 0, 0, 0.4);
    --popup-shadow: rgba(0, 0, 0, 0.5);

    --background-image: url("assets/images/site_dark.png");
    --card-bg: #111111;
  }
}

/* GLOBAL PAGE STYLES */

html,
body {
  background-color: var(--page);
  color: var(--ink);
}