/* color palette from <https://github.com/vuejs/theme> */
:root {
  --theme-c-muted-blue: #22759d;
  --theme-c-amaranth: #e93f3f;
  --theme-c-deep-purple: #33124a;

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

  --theme-c-desert-sand: #e7c7b1;
  --theme-c-woody-brown: #493428;
  --theme-c-walnut-brown: #422322;
  --theme-c-deep-oak: #341c1c;
  --theme-c-crystal-blue: #6bb9db;
  --theme-c-antique-white: #f8ebdd;
  --theme-c-jagged-ice: #a7eef1;
  --theme-c-glacier-blue: #6dabd1;
  --theme-c-dark-grey-blue: #2d4c5a;

  --theme-c-muddy-green: #6b682f;

  --theme-b-background-sebin-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-background-sebin-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-background-viktor-light: url(@/assets/layered-waves-light.svg);
  --theme-b-background-viktor-dark: url(@/assets/layered-waves-dark.svg);
}

/* general purpose variables */
:root {
  --character-list-flex-flow: column nowrap;

  --character-item-flex-flow: column nowrap;
  --character-item-transition: all 0.2s ease-in-out;

  --character-item-link-flex-flow: column nowrap;
  --character-item-link-justify-content: center;

  --character-item-image-flex: 0 0 15vw;
  --character-item-image-size: 30vw;
  --character-item-image-max-size: 15vh;
  --character-item-image-border: 0.75vh solid #fff;

  --character-item-meta-text-align: center;
  --character-item-meta-max-height: 100%;
  --character-item-meta-margin: var(--character-item-meta-margin-hover);
  --character-item-meta-margin-hover: 1.75rem 0 0 0;
  --character-item-meta-opacity: 1;

  --character-item-name-font-size: 1.75rem;
  --character-item-species-font-size: 1.25rem;

  --background-height-base--viktor: 80%;
  --background-height-hover--viktor: 80%;
}

/* semantic color variables for this project */
:root {
  --background--sebin: var(--theme-b-background-sebin-light);

  --background--viktor: var(--theme-c-desert-sand);
  --background-image--viktor: var(--theme-b-background-viktor-light);
  --color-text--viktor: var(--theme-c-woody-brown);
  --image-background--viktor: var(--theme-c-dark-grey-blue);

  --background--jarek: var(--theme-c-muddy-green);

  --base-saturation: saturate(100%);
  --hover-saturation: saturate(100%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background--sebin: var(--theme-b-background-sebin-dark);

    --background--viktor: var(--theme-c-dark-grey-blue);
    --background-image--viktor: var(--theme-b-background-viktor-dark);
    --color-text--viktor: var(--theme-c-antique-white);
    --image-background--viktor: var(--theme-c-desert-sand);
  }
}

@media (min-width: 30em) {
  :root {
    --character-item-flex-flow: row nowrap;

    --character-item-link-flex: 0 0 27rem;
    --character-item-link-flex-flow: row nowrap;
    --character-item-link-justify-content: space-between;

    --character-item-image-flex: 0 0 10rem;

    --character-item-image-size: 15vh;
    --character-item-image-max-size: 15vh;

    --character-item-meta-flex: 0 0 15rem;
    --character-item-meta-text-align: left;
    --character-item-meta-margin-hover: 0;
  }
}

@media (min-width: 50em) and (orientation: landscape) {
  :root {
    --character-list-flex-flow: row nowrap;

    --character-item-link-flex: 0 0 auto;
    --character-item-link-flex-flow: column wrap;
    --character-item-link-justify-content: center;

    --character-item-image-flex: 0 0 15vw;
    --character-item-image-size: 15vw;
    --character-item-image-max-size: 15vw;
    --character-item-image-border: 0.75vw solid #fff;

    --character-item-meta-flex: 0 0 auto;
    --character-item-meta-text-align: center;
    --character-item-meta-margin-hover: 3vw 0 0 0;

    --character-item-name-font-size: 2.5vw;
    --character-item-species-font-size: 1.25vw;
  }
}

@media (hover: hover) {
  :root {
    --character-item-meta-max-height: 0;
    --character-item-meta-margin: 0;
    --character-item-meta-opacity: 0;

    --background-height-base--viktor: 50%;

    --base-saturation: saturate(30%);
    --hover-saturation: saturate(100%);
  }
}
