/* Shared Styles for Frontend and Backend like Colors */

@import url("fonts/leaguegothic/stylesheet.css");
@import url("https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,700;1,400;1,700&display=swap");

@font-face {
  font-family: "League Spartan Variable";
  src: url("fonts/leaguespartan/variable/WOFF2/LeagueSpartan-VF.woff2") format("woff2-variations");
  font-weight: 100 200 300 400 500 600 700 800 900;
}

/* Site Styling */

:root {
  color-scheme: light dark; /* both supported */

  /* Site Colors */
  --color-knock-red: #701711;
  --color-knock-rust: #bb4026;
  --color-terracotta: #dea78d;
  --color-seafoam: #7ecbb1;
  --color-blue: #3771c8;
  --color-mid-gray: #7b7b7b;
  --color-light-gray: rgba(236, 236, 236, 1);
  --color-purple: #5a188f;
  --color-black: #333333;
  --color-white: #fff;
  /* Main */
  --main-background-color: var(--color-white);
  --main-text-color: var(--color-black);
  --main-link-color: var(--color-blue);
  --main-font-size: 19px;
  --main-content-width: 960px;
  /* Headline */
  --headline-font-family: "League Spartan Variable";
  /* Content */
  --content-bottom-margin: 1.65rem;
  --content-font-family: "Lora";
  --content-content-width: 680px;
  --content-font-weight: 400;
  --content-headline-listings-font-size: 1.1875rem;
  /* Buttons */
  --button-background-color: var(--color-knock-red);
  --button-foreground-color: var(--color-white);
  /* Forms */
  --form-input-background-color: var(--color-white);
  --form-input-border-color: var(--color-mid-gray);
  --form-input-border-focus-color: var(--color-seafoam);
  --form-input-submit-background-color: var(--button-background-color);
  --form-input-submit-foreground-color: var(--button-foreground-color);
  /* Footer */
  --footer-background-color: var(--color-knock-red);
  --footer-foreground-color: var(--color-white);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Site Colors */
    --color-mid-gray: #aaa;
    --color-light-gray: #2c2c2c;
    --color-black: #f0f2f3;
    --color-blackout: #000000;
    /* Main */
    --main-background-color: var(--color-blackout);
    --main-text-color: var(--color-black);
    --main-link-color: var(--color-seafoam);
  }
}

@media (max-width: 480px) {
  :root {
    --main-font-size: 17px;
  }
}

/* Font Sizes */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--headline-font-family);
  margin-bottom: 1.6rem;
  line-height: 1;
  font-weight: normal;
}

h1,
.has-huge-font-size {
  font-size: 3.2rem;
}

h2,
.has-large-font-size {
  font-size: 2.8rem;
}

h3 {
  font-size: 2.3rem;
}

h4 {
  font-size: 2rem;
}

h5 {
  font-size: 1.7rem;
}

h6 {
  font-size: 1.3rem;
}

/* Colors */

.has-text-black-color {
  color: var(--color-black);
}

.has-text-black-background-color {
  background-color: var(--color-black);
}

@media (prefers-color-scheme: dark) {
  /* For when it has been explicitly called for the color to be black */
  .has-text-black-color {
    color: var(--color-blackout);
  }

  .has-text-black-background-color {
    background-color: var(--color-blackout);
  }
}

.has-text-white-color {
  color: var(--color-white);
}

.has-text-white-color a {
  color: var(--color-white);
}
.has-text-white-color a:hover {
  color: var(--color-seafoam);
}

.has-text-white-background-color {
  background-color: var(--color-white);
}

.has-knock-garnet-color {
  color: var(--color-knock-red);
}

.has-knock-garnet-background-color {
  background-color: var(--color-knock-red);
}

.has-knock-rust-color {
  color: var(--color-knock-rust);
}

.has-knock-rust-background-color {
  background-color: var(--color-knock-rust);
}

.has-knock-terracotta-color {
  color: var(--color-terracotta);
}

.has-knock-terracotta-background-color {
  background-color: var(--color-terracotta);
}

.has-knock-seafoam-color {
  color: var(--color-seafoam);
}

.has-knock-seafoam-background-color {
  background-color: var(--color-seafoam);
}

.has-purple-color {
  color: var(--color-purple);
}

.has-purple-background-color {
  background-color: var(--color-purple);
}

.has-link-blue-color {
  color: var(--color-blue);
}

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

.has-mid-gray-color {
  color: var(--color-mid-gray);
}

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

/* WordPress Block Stylings */

.wp-block-button__link {
  font-family: var(--headline-font-family);
  text-decoration: none;
}