/* === GLOBAL CSS VARIABLES === */
/*
  Variable usage:
    var(--variable-name)
  Example:
    #sow-header {
      font-family: var(--font-primary);
      color: var(--color-primary);
      text-align: left;
      margin-bottom: 30px;
    }
*/
:root {

  /* === Color Palette from Style Guide === */
  --color-primary: #1C0776;    /* dark blue */
  --color-primary-light: #0E6ADC;    /* bright blue */
  --color-gray-light: #A5A5A5;      /* light gray */
  --color-gray: #ACA9A9; /* gray */
  --color-gray-dark: #403F3F;       /* dark gray */
  --color-gray-black: #212125;       /* black gray */
  --color-white: #FFFFFF;
  --color-off-white: #F5F5F5; /* off-white */

  /* === Text Colors === */
  --color-text: var(--color-gray-dark);
  --color-text-light: var(--color-gray-light);
  --color-background: var(--color-white);
  --color-info: #1579F6;
  --color-warning: #F6C218;
  --color-error: #B3261E;

  /* === Typography === */
  --font-primary: 'Roboto', sans-serif;
  --font-size-h1: 48px;
  --font-size-h2: 32px;
  --font-size-h3: 24px;
  --font-size-body-lg: 18px;
  --font-size-body: 16px;
  --font-size-button: 16px;
  --font-size-small: 14px;
  --font-size-caption: 12px;
  /* 
  Font sizing reference
    H1	          48px	  3em
    H2	          32px	  2em
    H3	          24px	  1.5em
    Body (lg)	    18px	  1.125em
    Body	        16px	  1em
    Button Text	  16px	  1em
    Small Text	  14px	  0.875em
    Caption	      12px	  0.75em 
  */

  --waves-border-radius: 8px;
  --button-height-fat: 44px;
  --button-height-slim: 33px;

}