@import 'fontfaces';

/* theme colors */
:root {
  --theme-c-dull-red: #c64c35;
  --theme-c-indian-yellow: #eda958;
  --theme-c-dusky-blue: #4b608f;
  --theme-c-glaucous: #6684c0;
  --theme-c-kelly-green: #31c215;
  --theme-c-iridium: #413a3a;
  --theme-c-ironstone: #7f4539;

  --theme-c-dull-red-darker: #762d1f;
  --theme-c-dull-red-darkest: #39160f;
  --theme-c-indian-yellow-darker: #c97716;
  --theme-c-indian-yellow-darkest: #844e0e;

  --theme-c-muted-blue: #22759d;
  --theme-c-amaranth: #e93f3f;
  --theme-c-deep-purple: #33124a;
  --theme-c-charcoal: #303030;

  --theme-c-muted-blue-darker: #195673;
  --theme-c-amaranth-darker: #800f0f;
  --theme-c-amaranth-darkest: #690c0c;
  --theme-c-deep-purple-darker: #170821;

  --theme-c-white: #ffffff;
  --theme-c-black: #000000;

  --theme-c-love: #e00f60;
  --theme-c-yes: #2faf2a;
  --theme-c-maybe: #daa520;
  --theme-c-no: #8b0000;
  --theme-c-receive: #448dc9;
  --theme-c-give: #4a7d91;

  --theme-c-love-dark: #9b0a41;
  --theme-c-yes-dark: #1f771c;
  --theme-c-maybe-dark: #997416;
  --theme-c-no-dark: #530000;

  --theme-c-dull-red-translucent: #c64c35bf;
  --theme-c-indian-yellow-translucent: #eda958bf;
  --theme-c-dusky-blue-translucent: #4b608fbf;
  --theme-c-glaucous-translucent: #6684c0bf;
  --theme-c-kelly-green-translucent: #31c215bf;
  --theme-c-iridium-translucent: #413a3abf;
  --theme-c-ironstone-translucent: #7f4539bf;

  --theme-c-muted-blue-translucent: #22759dbf;
  --theme-c-amaranth-translucent: #e93f3fbf;
  --theme-c-deep-purple-translucent: #33124abf;
  --theme-c-charcoal-translucent: #303030bf;

  --theme-b-mix-blend-mode: multiply;

  --theme-b-page-background-light: radial-gradient(
      circle at bottom right,
      var(--theme-c-amaranth) 5%,
      transparent 50%
    ),
    radial-gradient(
      circle at top left,
      var(--theme-c-muted-blue) 5%,
      var(--theme-c-deep-purple) 100%
    );
  --theme-b-page-background-dark: radial-gradient(
      circle at bottom right,
      var(--theme-c-amaranth-darker) 5%,
      transparent 50%
    ),
    radial-gradient(
      circle at top left,
      var(--theme-c-muted-blue-darker) 5%,
      var(--theme-c-deep-purple-darker) 100%
    );

  --theme-b-navigation-background-light: radial-gradient(
      circle at bottom right,
      var(--theme-c-amaranth-darker) 20%,
      transparent 80%
    ),
    radial-gradient(
      circle at top left,
      var(--theme-c-indian-yellow-darker) 5%,
      var(--theme-c-dull-red-darker) 100%
    );
  --theme-b-navigation-background-dark: radial-gradient(
      circle at bottom right,
      var(--theme-c-amaranth-darkest) 20%,
      transparent 80%
    ),
    radial-gradient(
      circle at top left,
      var(--theme-c-indian-yellow-darkest) 5%,
      var(--theme-c-dull-red-darkest) 100%
    );
  --theme-b-modal-background-light: radial-gradient(
      circle at top left,
      var(--theme-c-muted-blue) 5%,
      var(--theme-c-deep-purple) 100%
    )
    fixed no-repeat;
  --theme-b-modal-background-dark: radial-gradient(
      circle at top left,
      var(--theme-c-muted-blue-darker) 5%,
      var(--theme-c-deep-purple-darker) 100%
    )
    fixed no-repeat;
}

/* general purpose variables */
:root {
  --font-family-copy: 'Dosis', sans-serif;
  --font-family-headings: 'Zilla Slab', sans-serif;

  --font-size: 18px;
  --font-size-h1: 3rem;
  --font-size-h2: 1.825rem;
  --font-size-h3: 1.225rem;

  --text-line-height: 1.5;

  --paragraph-margin: 1rem;

  --textblock-max-width: 36rem;
  --refimage-max-width: 50rem;

  --page-background-radial-gradient: var(--theme-b-radial-gradient-light);

  --container-spacing-top-safe: max(1rem, env(safe-area-inset-top));
  --container-spacing-right-safe: max(1rem, env(safe-area-inset-right));
  --container-spacing-bottom-safe: max(1rem, env(safe-area-inset-bottom));
  --container-spacing-left-safe: max(1rem, env(safe-area-inset-left));

  --container-box-shadow: 0.125rem 0.125rem 0.5rem rgba(0, 0, 0, 0.7);

  --section-max-width: 100%;

  --page-background: var(--theme-b-page-background-light);
  --header-background: var(--theme-b-navigation-background-light);
  --header-margin: 1rem var(--container-spacing-right-safe) 1rem var(--container-spacing-left-safe);
  --navigation-justify-content: flex-start;

  --quickfacts-background: var(--theme-b-page-background-light);
  --quickfacts-cols-double: auto;
  --quickfacts-cols-triple: auto;
  --quickfacts-cols-quadruple: auto;

  --modal-background: var(--theme-b-modal-background-light);
  --modal-width: 100%;

  --welcome-header-headings-flex-basis: 100%;
  --welcome-header-headings-margin: 1.5rem 0 0 0;
  --welcome-header-mainline-font-size: 2rem;
  --welcome-header-subline-font-size: 1rem;

  --button-group-flex: 1 0 100%;

  --figure-cencor-background-color: var(--theme-c-amaranth);
  --figure-cencor-width: 50vw;
  --figure-cencor-height: 35vh;

  --gallery-size: 1rem;
  --gallery-arrow-position: 1.5rem;
  --gallery-image-padding: 0 3rem;

  --table-max-width: 45rem;
  --table-border: 0.0625rem solid var(--theme-c-indian-yellow);
  --table-cell-padding: 0.25rem 0.5rem;

  --attack-list-max-width: 100%;

  --attack-item-flex: 0 1 100%;
  --attack-item-flex-flow: row wrap;
  --attack-item-nth-child-even-text-align: left;
  --attack-item-first-child-order: auto;
  --attack-item-illustration-size: auto;
  --attack-item-illustration-flex: 1 1 var(--attack-item-illustration-size);
  --attack-item-text-padding: auto;

  --social-links-flex-flow: row wrap;
  --social-links-flex: 1 1 50%;

  --footer-padding: var(--container-spacing-top-safe) 0 var(--container-spacing-bottom-safe) 0;
}

/* semantic color variables for this project */
:root {
  --color-background: var(--theme-c-deep-purple);
  --color-background-footer: var(--theme-c-deep-purple);

  --color-heading: var(--theme-c-white);
  --color-text: var(--theme-c-white);
  --color-link-text: var();
  --color-link-text-hover: var();
  --color-link-text-underline: var();

  --color-button: var(--theme-c-muted-blue);
  --color-button-box-shadow: var(--theme-c-muted-blue-darker);
  --color-toggle: var(--theme-c-dull-red);
  --color-quickfacts-border: var(--theme-c-indian-yellow);
  --color-modal-border: var(--theme-c-indian-yellow);
  --color-figure-polaroid-text: var(--theme-c-charcoal);
}

@media (prefers-color-scheme: dark) {
  :root {
    --page-background: var(--theme-b-page-background-dark);
    --header-background: var(--theme-b-navigation-background-dark);
    --quickfacts-background: var(--theme-b-page-background-dark);
    --modal-background: var(--theme-b-modal-background-dark);

    --color-button: var(--theme-c-deep-purple);
    --color-button-box-shadow: var(--theme-c-deep-purple-darker);
  }
}

/* desktop */
@media (min-width: 35em) {
  :root {
    --font-size: 20px;
    --font-size-h2: 2.25rem;
    --font-size-h3: 1.5rem;
    --navigation-justify-content: center;

    --modal-width: 30rem;

    --welcome-header-headings-flex-basis: 23rem;
    --welcome-header-headings-margin: 0;
    --welcome-header-mainline-font-size: var(--font-size-h1);

    --quickfacts-cols-double: 2 auto;
    --quickfacts-cols-triple: 3 auto;
    --quickfacts-cols-quadruple: 4 auto;

    --section-max-width: 34rem;

    --button-group-flex: 0 0 auto;

    --table-cell-padding: 0.5rem 1rem;

    --figure-cencor-width: 20rem;
    --figure-cencor-height: 20rem;

    --gallery-size: 1.5rem;
    --gallery-arrow-position: 2rem;
    --gallery-image-padding: 0 3.5rem;

    --social-links-flex-flow: row nowrap;
    --social-links-flex: 1 1 auto;
  }
}

@media (min-width: 45em) {
  :root {
    --attack-list-max-width: 55rem;

    --attack-item-flex-flow: row nowrap;
    --attack-item-nth-child-even-text-align: right;
    --attack-item-first-child-order: 1;
    --attack-item-illustration-size: 20rem;
    --attack-item-illustration-flex: 0 0 var(--attack-item-illustration-size);
    --attack-item-text-padding: 0 1rem;
  }
}

@media (min-width: 90em) {
  :root {
    --header-margin: 1rem auto;

    --attack-list-max-width: 80rem;

    --attack-item-flex: 0 1 50%;
    --attack-item-nth-child-even-text-align: left;
    --attack-item-first-child-order: 0;
  }
}

/* bigscreen */
@media (min-width: 120em) {
  :root {
    --font-size: 24px;
  }
}

/* hyooj */
@media (min-width: 130em) {
  :root {
    --font-size: 28px;
  }
}