@import url('https://fonts.googleapis.com/css?family=Dancing+Script:wght@400;700&family=Roboto:300,400,500,700&display=swap');

/* Please review the README in this folder to better
  understand the color naming convention. */

:root {

  /* Static colors regardless of theme */
  --color-brand-1: #23060a;
  --color-brand-1-1: #78354f;
  --color-brand-1-2: #b26f84;
  --color-brand-1-3: #6b3947;
  --color-brand-1-4: #913b49;
  --color-brand-2: #78354f;
  --color-brand-2-1: #532235;
  --color-brand-1-c: #ffffff;

  /* These colors are intended to contrast against images
    no matter which theme is used. */
  --color-dkimg-1: #dce6e9;
  --color-dkimg-c: #5d5d68;
  --color-ltimg-1: #5d5d68;
  --color-ltimg-c: #dce6e9;

  /* This image should be used to stand out in both light and dark mode */
  --img-highlight: linear-gradient(rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1));

  /* Default fonts, before theme overrides */
  --font-display: 'Dancing Script', cursive;
  --font-content: 'Roboto', sans-serif;

  /* Setting as few document defaults as possible in favor of
    encapsulated CSS at the component level */
  background-color: var(--color-site-1);
  color: var(--color-site-1-c);
  font-family: var(--font-content);
  scroll-behavior: smooth;

  /* 62.5% is typically 10px, making 1rem = 10px for easy reference.
    Keeping the units relative is better for accessibility. */
  font-size: 62.5%;
}

option:checked:not(:disabled) {
  background-color: var(--color-accent-1);
  color: var(--color-accent-1-c);
}

::selection {
  background: var(--color-accent-1);
  color: var(--color-accent-1-c);
}

::-moz-selection {
  background: var(--color-accent-1);
  color: var(--color-accent-1-c);
}

body {

  /* Setting the generic font size back to 20px for legibility */
  font-size: 2rem;
}

/* make sure the outermost elements always take up 100% of the vertical space */
:root,
body,
#__next {
  height: 100%;
  margin: 0;
}

:root.base {

  /* Colors */
  --color-site-1: #f7f1f3;
  --color-site-1-1: #dacdd1;
  --color-site-1-c: #685d62;
  --color-site-2: #d6c2d0;
  --color-site-2-c: #822b45;
  --color-site-2-1: #825e69;
  --color-site-3: #e9dde0;
  --color-site-3-c: #793e50;

  --color-accent-1: #ff1a1a;
  --color-accent-1-1: #ff38ac;
  --color-accent-1-c: #ffe5e5;

  --color-disabled-1: #e6e6e6;
  --color-disabled-1-c: #c4c0c0;

  --color-success-1: #dde9dd;
  --color-success-1-c: #3d9130;
  --color-success-1-1: #c4d4c4;

  --color-warning-1: #f0eddb;
  --color-warning-1-c: #a88400;
  --color-warning-1-1: #d8d0ba;

  --color-error-1: #f2dede;
  --color-error-1-c: #a93737;
  --color-error-1-1: #d0b4b4;
}

:root.dark {

  /* Colors */
  --color-site-1: #1a1919;
  --color-site-1-1: #827378;
  --color-site-1-c: #e9dce0;
  --color-site-2: #211218;
  --color-site-2-c: #e4b9d0;
  --color-site-2-1: #6a3d4c;
  --color-site-3: #2e252b;
  --color-site-3-c: #e4cae3;

  --color-accent-1: #f298a8;
  --color-accent-1-1: #fc6094;
  --color-accent-1-c: #352d2d;

  --color-disabled-1: #373434;
  --color-disabled-1-c: #6f6d6d;

  --color-success-1: #173713;
  --color-success-1-c: #a2ffa2;
  --color-success-1-1: #6cbb6c;

  --color-warning-1: #372f13;
  --color-warning-1-c: #ffed73;
  --color-warning-1-1: #bba56c;

  --color-error-1: #371313;
  --color-error-1-c: #ff9b9b;
  --color-error-1-1: #dd6666;
}