/**
 * @file
 * Theme variables.
 */

:root {
  /* Font sizes */
  --fontSize: 1em;
  --h1Size: calc(2.1rem + 1vw);
  --h2Size: calc(1.625rem + 1vw);
  --h3Size: calc(1.25rem + 1vw);
  --h4Size: 1.25rem;
  --smSize: 1rem;
  --lgSize: 1.25rem;

  /* Spacing */
  --spacing01: 0.125rem;
  --spacing02: 0.25rem;
  --spacing03: 0.5rem;
  --spacing04: 0.75rem;
  --spacing05: 1rem;
  --spacing06: 1.5rem;
  --spacing07: 2.25rem;
  --spacing08: 3rem;

  /* Layout scale */
  --layout01: 0.75rem;
  --layout02: 1rem;
  --layout03: 1.5rem;
  --layout04: 2.25rem;
  --layout05: 3rem;
  --layout06: 3.75rem;
  --layout07: 4.5rem;
  --layout08: 7.5rem;

  /* Radius */
  --radius01: 0.667rem;
  --radius02: 1.667rem;
  --radius03: 2.5rem;

  /* Grid spacing */
  --gridColumnGap: var(--spacing06);
  --gridRowGap: var(--layout03);

  /* Layout */
  --gutterWidth: var(--spacing05);
  --layoutWidth: calc(100vw - var(--gutterWidth) * 2);
  --layoutWidthMax: 1024px;
  --layoutDefaultSpacing: var(--layout05);
  --layoutContentWidth: var(--layoutWidth);
  --layoutContentSpacing: var(--layoutDefaultSpacing);

  /* Colors */
  --brandBlue: #003087;
  --lightBlue: #00aeef;
  --darkBlue: #002d56;
  --brightBlue: #0057b7;
  --black: #000;
  --beige: #bab296;
  --yellow: #edc417;
  --lightGreen: #94bb20;
  --darkGreen: #3d7a4a;
  --purple: #61116a;
  --orange: #eb6305;
  --red: #d31245;
  --darkGrey: #333;
  --medGrey: #b6b6b6;
  --grey: #ddd;
  --lightGrey: #f2f2f2;
  --white: #fff;

  /* Theme colors */
  --color: var(--darkGrey);
  --colorInverse: var(--white);
  --bgColor: var(--white);
  --accentColor: var(--darkGreen);
  --headingColor: var(--brandBlue);
  --linkColor: var(--brightBlue);
  --buttonColor: var(--white);
  --buttonBgColor: var(--brightBlue);
  --messageColor: var(--darkGrey);
  --messageLinkColor: var(--brightBlue);
  --borderColor: var(--grey);
  --borderActiveColor: var(--medGrey);
  --borderHover: var(--darkGrey);
  --boxBgColor: var(--white);
  --inputColor: var(--darkGrey);
  --placeholderColor: var(--brandBlue);
  --iconColor: var(--brightBlue);
  --tableColor: var(--white);
  --tableBgColor: var(--brightBlue);
  --cardBgColor: var(--lightGrey);
  --bookBg: var(--brandBlue);
  --bookLink: var(--yellow);
  --blockquoteColor: var(--darkBlue);

  /* Status colors */
  --errorColor: var(--red);
  --statusColor: var(--lightGreen);
  --warningColor: var(--orange);
  --unpublishedColor: hsl(0, 100%, 98%);

  /* Shadows */
  --borderShadow: rgba(51, 51, 51, 0.2);
  --borderShadowActive: rgba(0, 127, 255, 0.85);
  --boxShadow01: 0 1px 2px var(--borderShadow);
  --boxShadow02: 0 1px 4px var(--borderShadow);
  --boxShadow03: 0 4px 8px var(--borderShadow);
  --boxShadow04: 0 2px 13px 4px var(--borderShadow);
  --boxShadow05: 0 4px 20px 4px var(--borderShadow);
  --boxShadow06: 0 4px 26px 8px var(--borderShadow);
}

/* Larger than HD desktop */
@media (min-width: 75em) {
  :root {
    --fontSize: 1.125em;
    --h1Size: 52px;
    --h2Size: 42px;
    --h3Size: 32px;
    --h4Size: 26px;
    --smSize: 16px;
    --lgSize: 24px;
    --layoutWidth: var(--layoutWidthMax);
    --layoutDefaultSpacing: var(--layout07);
  }
}