/**
 * CSS variables.
 */

body {
  /* Widths and Spacing */
  --width-large: 61rem; /* 1098px */
  --width-medium: 50.67rem; /* 912px */
  --width-small: 20rem; /* 360px */
  --width-sidebar: 16.67rem; /* 300px */
  --spacing: 1rem;
  --spacing-padding-horizontal: var(--spacing);
  --line-height: 1.5;
  --vertical-rhythm-spacing: calc(var(--line-height) * 1rem);

  /* Colours */
  --color-black: #343434;
  --color-dark-grey: #5c5c5c;
  --color-blue-dk: #253245;
  --color-blue-tq-text: #118190;
  --color-blue-tq: #27B8CB;
  --color-gold: #F3B745;
  --color-orange: #E57A3F;
  --color-pale-orange: #F9F5EF;
  --color-pale-grey: #F3F3F3;
  --color-white: #FFFFFF;

  /* Drupal alert colors */
  --color-red: #df8775;
  --color-red-light: #f9c9bf;
  --color-yellow: #eebc59;
  --color-yellow-light: #f4daa6;
  --color-green: #82b36a;
  --color-green-light: #c9e1bd;

  /* Colours Applied */
  --color-text: var(--color-black);
  --color-heading: var(--color-black);
  --color-link: var(--color-black);
  --color-focus: var(--color-blue-tq-text);
  --color-hover: var(--color-blue-tq-text);
  --color-header: var(--color-blue-dk);
  --color-blockquote: var(--color-pale-grey);
  --color-alert: var(--color-red);
  --color-alert-background: var(--color-red-light);
  --color-info: var(--color-green);
  --color-info-background: var(--color-green-light);
  --color-warning: var(--color-yellow);
  --color-warning-background: var(--color-yellow-light);

  /* Fonts */
  --font-base: "Public Sans", sans-serif;;
  --font-heading: "Paytone One", sans-serif;

  /*
    Font sizes based on vertical rhythm of:
    - Font size: 18px;
    - Scale factor: 1.25
    - Details: https://www.gridlover.net/try
  */
  --font-size: 18px;
  --font-size-smallest: calc(var(--font-size) * 0.666);
  --font-size-smaller: calc(var(--font-size) * 0.777);
  --font-size-small: calc(var(--font-size) * 0.888);
  --font-size-medium: calc(var(--font-size) * 1);
  --font-size-large: calc(var(--font-size) * 1.2778);
  --font-size-larger: calc(var(--font-size) * 1.5555);
  --font-size-largest: calc(var(--font-size) * 1.9444);
  --font-size-h1: clamp(var(--font-size-larger), 10vw, var(--font-size-largest));
  --font-size-h2: clamp(var(--font-size-large), 8vw, var(--font-size-larger));
  --font-size-h3: clamp(var(--font-size-medium), 6vw, var(--font-size-large));
  --font-size-h4: var(--font-size-medium);
  --font-size-h5: var(--font-size-medium);
  --font-size-h6: var(--font-size-medium);

  /* Borders */
  --border-width: 1px;
  --border-width-large: 5px;
  --border-color: var(--color-gold);
  --border-color-alert: var(--color-black);
  --border-style: solid;
  --border-radius: var(--spacing-smallest);
  --border: var(--border-width) var(--border-style) var(--border-color);
  --border-large: var(--border-width-large) var(--border-style) var(--border-color);
}