// Global Variables. These can be overriden with a selector that has more
// specificity, such as body, button, etc. See https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
:root {
  --color-darkest: rgb(66,66,66);
  --color-darker: rgba(66,66,66,.7);
  --color-dark: rgba(66,66,66,.35);
  --color-lightest: rgb(255,255,255);
  --color-lighter: rgba(255,255,255,.65);
  --color-light: rgba(255,255,255,.35);
  --color-error: #DE3618;
  --color-warning: #EEC200;
  --color-success: #50B83C;
  --color-primary: #007ACE;
  --color-primary-light: #B4E1FA;
  --color-primary-dark: #007ACE;
  --color-secondary: #DFE3E8;
  --color-secondary-light: #F4F6F8;
  --color-secondary-dark: #C4CDD5;
  --color-hover-dark: rgba(66,66,66,.12);

  --color-text-dark: var(--color-darkest);
  --color-text-dark-secondary: var(--color-darker);
  --color-text-dark-hint: var(--color-dark);

  --color-text-light: var(--color-lightest);
  --color-text-light-secondary: var(--color-lighter);
  --color-text-light-hint: var(--color-light);

  --font-family-sans-serif: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, Ubuntu, roboto, noto, segoe ui, arial, sans-serif;
  --font-family-serif: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  --font-family-mono: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
  --font-size-headline-1: 6rem;
  --font-size-headline-2: 3.75rem;
  --font-size-headline-3: 3rem;
  --font-size-headline-4: 2.125rem;
  --font-size-headline-5: 1.5rem;
  --font-size-headline-6: 1.25rem;
  --font-size-subtitle-1: 1rem;
  --font-size-subtitle-2: .875rem;
  --font-size-body-1: 1rem;
  --font-size-body-2: .875rem;
  --font-size-caption: .75rem;
  --border-radius: 0;
  --border-color-dark: rgba(66,66,66,.10);
  --border-color-darker: rgba(66,66,66,.18);
  --box-shadow-color: rgba(66,66,66,.12);
  --box-shadow-sm: 0 0 2px 0 --var(--box-shadow-color);
  --box-shadow-md: 0 0 12px 0 --var(--box-shadow-color);
  --box-shadow-lg: 0 0 24px 0 --var(--box-shadow-color);
}