/* Specifies colors for elements. Note that the decorations are in a different
 * file.
 */

@media (prefers-color-scheme: dark) {
   :root {
      --color-fg-default: #ebebeb;
      --color-fg-light: #a1a1a1;
      --color-fg-dark: #a1a1a1;

      --color-bg-default: #474747;
      --color-bg-light: #f1f1f1;
      --color-bg-dark: #343434;

      --color-bg-blue: #001f4e;
      --color-bg-red: #4e0500;
      --color-bg-green: #004e03;
      --color-bg-yellow: #4e4600;
      --color-bg-brown: #523429;
      --color-bg-magenta: #3e0049;
      --color-bg-cyan: #004a53;
      --color-bg-gray: #424242;
      --color-bg-orange: #442900;

      --color-fg-blue: #8fa3c2;
      --color-fg-red: #bd9794;
      --color-fg-green: #a6c9a7;
      --color-fg-yellow: #d3ce9e;
      --color-fg-brown: #bba7a0;
      --color-fg-magenta: #b29fb6;
      --color-fg-cyan: #afd3d8;
      --color-fg-gray: #d6d6d6;
      --color-fg-orange: #fff6e9;

      --color-bg-bright-blue: #0066ff;
      --color-bg-bright-red: #ff1100;
      --color-bg-bright-green: #00ff08;
      --color-bg-bright-yellow: #ffff00;
      --color-bg-bright-brown: #ffe1d7;
      --color-bg-bright-magenta: #d900ff;
      --color-bg-bright-cyan: #00e1ff;
      --color-bg-bright-gray: #ececec;
      --color-bg-bright-orange: #ff9900;

      --color-fg-bright-blue: #0066ff;
      --color-fg-bright-red: #ff1100;
      --color-fg-bright-green: #00ff08;
      --color-fg-bright-yellow: #ffff00;
      --color-fg-bright-brown: #ffe1d7;
      --color-fg-bright-magenta: #d900ff;
      --color-fg-bright-cyan: #00e1ff;
      --color-fg-bright-gray: #ececec;
      --color-fg-bright-orange: #ff9900;

      --color-box-shadow: #747474;
   }
}

@media (prefers-color-scheme: light) {
   :root {
      --color-bg-default: #f1f1f1;
      --color-bg-light: #fcfcfc;
      --color-bg-dark: #343434;

      --color-fg-default: #414141;
      --color-fg-light: #a1a1a1;
      --color-fg-dark: #a1a1a1;

      --color-fg-blue: #001f4e;
      --color-fg-red: #4e0500;
      --color-fg-green: #004e03;
      --color-fg-yellow: #4e4600;
      --color-fg-brown: #523429;
      --color-fg-magenta: #3e0049;
      --color-fg-cyan: #004a53;
      --color-fg-gray: #424242;
      --color-fg-orange: #442900;

      --color-bg-blue: #b9d4fc;
      --color-bg-red: #ffeeec;
      --color-bg-green: #cfffd1;
      --color-bg-yellow: #f8f2bc;
      --color-bg-brown: #f8e0d7;
      --color-bg-magenta: #f9dbff;
      --color-bg-cyan: #d1faff;
      --color-bg-gray: #d3d1d1;
      --color-bg-orange: #fff7ec;

      --color-fg-bright-blue: #0066ff;
      --color-fg-bright-red: #ff1100;
      --color-fg-bright-green: #00ff08;
      --color-fg-bright-yellow: #ffff00;
      --color-fg-bright-brown: #ffe1d7;
      --color-fg-bright-magenta: #d900ff;
      --color-fg-bright-cyan: #00e1ff;
      --color-fg-bright-gray: #ececec;
      --color-fg-bright-orange: #ff9900;

      --color-bg-bright-blue: #0066ff;
      --color-bg-bright-red: #ff1100;
      --color-bg-bright-green: #00ff08;
      --color-bg-bright-yellow: #ffff00;
      --color-bg-bright-brown: #ffe1d7;
      --color-bg-bright-magenta: #d900ff;
      --color-bg-bright-cyan: #00e1ff;
      --color-bg-bright-gray: #ececec;
      --color-bg-bright-orange: #ff9900;

      --color-box-shadow: var(--color-bg-gray);
   }
}

/* ******************************************** */


/* ******************************************** */

html, body {
   background-color: var(--color-bg-light);
   color: var(--color-fg-default);
}

/* ******************************************** */

.color-bg-default {
   background-color: var(--color-bg-default);
}

.color-bg-light {
   background-color: var(--color-bg-light);
}

.color-bg-dark {
   background-color: var(--color-bg-dark);
}

.color-bg-blue {
   background-color: var(--color-bg-blue);
}

.color-bg-red {
   background-color: var(--color-bg-red);
}

.color-bg-green {
   background-color: var(--color-bg-green);
}

.color-bg-yellow {
   background-color: var(--color-bg-yellow);
}

.color-bg-brown {
   background-color: var(--color-bg-brown);
}

.color-bg-magenta {
   background-color: var(--color-bg-magenta);
}

.color-bg-cyan {
   background-color: var(--color-bg-cyan);
}

.color-bg-gray {
   background-color: var(--color-bg-gray);
}

.color-bg-orange {
   background-color: var(--color-bg-orange);
}

/* ******************************************** */

.color-fg-default {
   color: var(--color-fg-default);
}

.color-fg-light {
   color: var(--color-fg-light);
}

.color-fg-dark {
   color: var(--color-fg-dark);
}

.color-fg-blue {
   color: var(--color-fg-blue);
}

.color-fg-red {
   color: var(--color-fg-red);
}

.color-fg-green {
   color: var(--color-fg-green);
}

.color-fg-yellow {
   color: var(--color-fg-yellow);
}

.color-fg-brown {
   color: var(--color-fg-brown);
}

.color-fg-magenta {
   color: var(--color-fg-magenta);
}

.color-fg-cyan {
   color: var(--color-fg-cyan);
}

.color-fg-gray {
   color: var(--color-fg-gray);
}

.color-fg-orange {
   color: var(--color-fg-orange);
}

/* ******************************************** */

.color-bg-bright-default {
   background-color: var(--color-bg-bright-default);
}

.color-bg-bright-blue {
   background-color: var(--color-bg-bright-blue);
}

.color-bg-bright-red {
   background-color: var(--color-bg-bright-red);
}

.color-bg-bright-green {
   background-color: var(--color-bg-bright-green);
}

.color-bg-bright-yellow {
   background-color: var(--color-bg-bright-yellow);
}

.color-bg-bright-brown {
   background-color: var(--color-bg-bright-brown);
}

.color-bg-bright-magenta {
   background-color: var(--color-bg-bright-magenta);
}

.color-bg-bright-cyan {
   background-color: var(--color-bg-bright-cyan);
}

.color-bg-bright-gray {
   background-color: var(--color-bg-bright-gray);
}

.color-bg-bright-orange {
   background-color: var(--color-bg-bright-orange);
}

/* ******************************************** */

.color-fg-bright-default {
   color: var(--color-fg-bright-default);
}

.color-fg-bright-blue {
   color: var(--color-fg-bright-blue);
}

.color-fg-bright-red {
   color: var(--color-fg-bright-red);
}

.color-fg-bright-green {
   color: var(--color-fg-bright-green);
}

.color-fg-bright-yellow {
   color: var(--color-fg-bright-yellow);
}

.color-fg-bright-brown {
   color: var(--color-fg-bright-brown);
}

.color-fg-bright-magenta {
   color: var(--color-fg-bright-magenta);
}

.color-fg-bright-cyan {
   color: var(--color-fg-bright-cyan);
}

.color-fg-bright-gray {
   color: var(--color-fg-bright-gray);
}

.color-fg-bright-orange {
   color: var(--color-fg-bright-orange);
}

/* ******************************************** */

.topbar {
   background-color: black;
   color: #00f7ff;
}

.topbar a {
   color: #00f7ff;
}

/* ******************************************** */

.btn-proceed {
   background-color: var(--color-bg-green);
   color: var(--color-fg-green);
}

.btn-cancel {
   background-color: var(--color-bg-red);
   color: var(--color-fg-red);
}

.btn-submit {
   background-color: var(--color-bg-blue);
   color: var(--color-fg-blue);
}

.btn-info {
   background-color: var(--color-bg-yellow);
   color: var(--color-fg-yellow);
}

.btn-outline {
   background-color: var(--color-bg-light) !important;
}

a:disabled,
.btn-proceed:disabled,
.btn-cancel:disabled,
.btn-submit:disabled,
.btn-info:disabled {
   background-color: var(--color-bg-gray) !important;
   color: var(--color-fg-bright-gray) !important;
}

.disabled,
.btn:disabled,
.btn-outline:disabled {
   background-color: none !important;
   color: var(--color-bg-bright-gray) !important;
}

nav>* {
   color: var(--color-fg-orange);
}


summary {
   background-color: var(--color-bg-orange)
}


/* Utility classes */
.odd {
   background-color: var(--color-bg-light);
}

.even {
   background-color: var(--color-bg-default);
}