:root {
  
  /* Black
  */

  --bl-1: #000000;
  --bl-2: #111111;
  --bl-3: #1e1e1e;
  --bl-4: #4d4d4d;

  /* White
  */

  --wh-1: #ffffff;
  --wh-2: #f6f6f6;
  --wh-3: #ececec;
  --wh-4: #d0d0d0;
  
  /* Accent
  */

  --ac-1: #003d5b;
  --ac-2: #f9c74f;
  
}

html,
html[data-theme=light] {

  /* Accent
  */

  --ac-0: var(--ac-1);
  --ac-3: var(--ac-2);

  /*  Primary (Light)
  */

  --pr-1: var(--wh-1);
  --pr-2: var(--wh-2);
  --pr-3: var(--wh-3);
  --pr-4: var(--wh-4);

  /*  Secondary
  */

  --sc-1: var(--bl-1);
  --sc-2: var(--bl-2);
  --sc-3: var(--bl-3);
  --sc-4: var(--bl-4);

  /* Background Image
  */

  --cover: url("/glimpses/light.webp");

}

html[data-theme=dark] {

  /* Accent
  */

  --ac-0: var(--ac-2);
  --ac-3: var(--ac-1);

  /*  Primary (Dark)
  */

  --pr-1: var(--bl-1);
  --pr-2: var(--bl-2);
  --pr-3: var(--bl-3);
  --pr-4: var(--bl-4);
  
  /*  Secondary
  */

  --sc-1: var(--wh-1);
  --sc-2: var(--wh-2);
  --sc-3: var(--wh-3);
  --sc-4: var(--wh-4);

  /* Background Image
  */

  --cover: url("/glimpses/dark.webp");

}

body {
  background: var(--pr-1);
  color: var(--sc-1);
}

::selection {
  background: var(--ac-3);
  color: var(--bl-1);
}