/**
 * CSS Variables for alexandrix.com
 * Generated from LESS variables
 */

:root {
  /* Colors - Base */
  --white: #FFFFFF;
  --super-light-grey: #EEE;
  --sat: 50%;

  /* Colors - Blue Scale */
  --blue-02: hsl(200, 50%, 2%);
  --blue-05: hsl(200, 50%, 5%);
  --blue-08: hsl(200, 50%, 8%);
  --blue-10: hsl(200, 50%, 10%);
  --blue-15: hsl(200, 50%, 15%);
  --blue-20: hsl(200, 50%, 20%);
  --blue-25: hsl(200, 50%, 25%);
  --blue-40: hsl(200, 50%, 40%);
  --blue-45: hsl(200, 50%, 45%);
  --blue-50: hsl(200, 50%, 50%);
  --blue-55: hsl(200, 50%, 55%);
  --blue-60: hsl(200, 50%, 60%);
  --blue-65: hsl(200, 50%, 65%);
  --blue-70: hsl(200, 50%, 70%);
  --blue-75: hsl(200, 50%, 75%);
  --blue-80: hsl(200, 50%, 80%);
  --blue-85: hsl(200, 50%, 85%);
  --blue-90: hsl(200, 50%, 90%);
  --blue-95: hsl(200, 50%, 95%);

  /* Colors - Special */
  --blue-40-transparent: hsla(200, 50%, 40%, 0.15);
  --vimeo-blue: hsl(195, 83%, 51%);

  /* Colors - Accent */
  --red-50: hsl(5, 50%, 50%);
  --green-50: hsl(160, 50%, 50%);
  --yellow-50: hsl(55, 50%, 50%);
  --purple-50: hsl(280, 50%, 50%);

  /* Colors - Text */
  --mid-grey: hsl(200, 10%, 60%);
  --blue-light-text: hsl(200, 20%, 80%);
  --blue-dark-text: hsl(200, 20%, 20%);

  /* Colors - Theme (Dark) */
  --background-color: var(--blue-02);
  --header-color: var(--blue-15);
  --header-border-color: var(--blue-10);
  --title-block-color: var(--blue-05);
  --title-block-border-color: var(--blue-08);
  --category-title-color: var(--blue-10);
  --category-title-border-color: var(--blue-15);
  --text-color: var(--blue-light-text);

  /* Spacing */
  --margin-small: 15px;
  --margin: 30px;
  --margin-large: 60px;
  --border-radius: 1px;
  --padding: 15px;
  --padding-large: 30px;

  /* Breakpoints */
  --xxs-xs: 400px;
  --xs-sm: 767px;
  --sm-md: 991px;
  --md-lg: 1199px;
  --lg-xl: 1600px;
}