/* This file contains colour-scheme- & theme-related stuffs */

/* Light Theme (Default) */
:root {
  /* Common Green (treat as private vars if possible) */
  --green-0: #233a13;
  --green-1: #385723;
  --green-2: #457a22;
  --green-3: #568636;

  /* Black/Grey/White */
  --grey-0: #000000;
  --grey-1: #1a1a1a;
  --grey-2: #2b2b2b;
  --grey-3: #4a4a4a;
  --grey-4: #6d6d6d;
  --grey-5: #8e8e8e;
  --grey-6: #a0a0a0;
  --grey-7: #b3b3b3;
  --grey-8: #e4e4e4;
  --grey-9: #ffffff;
  --black: var(--grey-0);
  --white: var(--grey-9);
  
  /* Demo Commons */
  --demo-common-dark-blue: #1e2739;
  --demo-common-blue: #0042b2;
  --demo-common-highlight-blue: #3daee9;

  /* Navigation Bar */
  --navbar-foreground: var(--white);
  --navbar-background: var(--green-1);
  --navbar-button-selected: var(--green-0);
  --navbar-button-hovering: var(--green-3);

  /* Main Content */
  --main-text-colour: var(--black);
  --main-background-colour: var(--white);

  /* Misc */
  --default-link-colour: var(--black);
  --quote-background-colour: var(--grey-8);

  /* Buttons */
  --button-confirm-background: var(--green-2);
  --button-confirm-foreground: var(--white);
  --button-confirm-hovering-background: var(--green-1);
  --button-confirm-hovering-foreground: var(--white);
  --button-confirm-active-background: var(--green-1);
  --button-confirm-active-foreground: var(--white);
}

/* Dark Theme Overwrites (UA can choose to enable this selector if it wants) */
@media (prefers-color-scheme: dark) {
  /* Modify core colour scheme */
  a:root {
    /* Link-related */
    --default-link-colour: var(--white);
    
    /* Main Content */
    --main-background-colour: var(--grey-2);
    --main-text-colour: var(--grey-8);

    /* Misc */
    --quote-background-colour: var(--grey-3);
  }
}

/* Universal theming, keep this minimal! */
html {
  background: var(--main-background-colour);
  color: var(--main-text-colour);
}