/* css theme vars for portersealdenver.com */
@import url("https://fonts.googleapis.com/css?family=Noto%20Sans%20Soyombo:700|Noto%20Sans%20Soyombo:400");

:root {
  --font-base: "Noto Sans Soyombo", sans-serif;
  --font-bold: var(--font-base);

  --weight-base: 400;
  --weight-bold: 700;

  --size-h1: 4.210rem; /* 67.36px */
  --size-h2: 3.158rem; /* 50.56px */
  --size-h3: 2.369rem; /* 37.92px */
  --size-h4: 1.777rem; /* 28.48px */
  --size-h5: 1.333rem; /* 21.28px */
  --size-base: 1.000rem; /* 16px */
  --size-small: 0.750rem; /* 12px*/
  --size-mini: 0.422rem; /* 6.75px */
  --size-tiny: 0.075rem; /* 1.200px */

  --size-max-content: 74.760rem; /* 1196.16px */
  --size-header: 9.989rem; /* 159.82px */
  --size-input-width: 13.318rem /* 213.09px */;
  --size-input-height: var(--size-h3);
  --size-table-header: var(--size-h1);

  --padding-extra-large: var(--size-h1);
  --padding-large: var(--size-h3);
  --padding-medium: var(--size-base);
  --padding-small: var(--size-small);

  --border-medium: 0.178rem; /* 2.848px */
  --border-thin: var(--size-tiny);

  --radius-large: var(--size-h3);
  --radius-small: var(--size-mini);

  --color-light-text: hsl(247, 75%, 5%);
  --color-light-background: hsl(240, 60%, 99%);
  --color-light-primary: hsl(252, 100%, 45%);
  --color-light-primary-transparent: hsla(252, 100%, 45%, 50%);
  --color-light-secondary: hsl(236, 100%, 89%);
  --color-light-secondary-transparent: hsla(236, 100%, 89%, 50%);
  --color-light-accent: hsl(41, 100%, 45%);

  --color-dark-text: hsl(246, 76%, 95%);
  --color-dark-background: hsl(240, 60%, 1%);
  --color-dark-primary: var(--color-light-primary); /* suggestion: hsl(252, 100%, 55%);*/
  --color-dark-primary-transparent: hsla(252, 100%, 45%, 70%);
  --color-dark-secondary: hsl(236, 100%, 11%);
  --color-dark-secondary-transparent: hsl(236, 100%, 11%, 75%);
  --color-dark-accent: hsl(41, 100%, 55%);

  --color-text: var(--color-light-text);
  --color-background: var(--color-light-background);
  --color-primary: var(--color-light-primary);
  --color-primary-transparent: var(--color-light-primary-transparent);
  --color-secondary: var(--color-light-secondary);
  --color-secondary-transparent: var(--color-light-secondary-transparent);
  --color-accent: var(--color-light-accent);

  @media (prefers-color-scheme: dark) {
    --color-text: var(--color-dark-text);
    --color-background: var(--color-dark-background);
    --color-primary: var(--color-dark-primary);
    --color-primary-transparent: var(--color-dark-primary-transparent);
    --color-secondary: var(--color-dark-secondary);
    --color-secondary-transparent: var(--color-dark-secondary-transparent);
    --color-accent: var(--color-dark-accent);
  }

  --transition-dropdown-timing-function: ease;
  --transition-dropdown-duration: 0.75s;

  --transition-hover-timing-function: ease;
  --transition-hover-duration: 1s;

  --transition-slidein-timing-function: ease;
  --transition-slidein-duration: 1.25s;

  @media (prefers-reduced-motion) {
    --transition-dropdown-duration: 0s;
    --transition-slidein-duration: 0s;
  }
}