//spacing, typography
@step--2: var(--step--2);
@step--1: var(--step--1);
@step-0: var(--step-0);
@step-1: var(--step-1);
@step-2: var(--step-2);
@step-3: var(--step-3);
@step-4: var(--step-4);
@step-5: var(--step-5);
@step-6: var(--step-6);
@step-7: var(--step-7);
@step-8: var(--step-8);
@step-9: var(--step-9);
@step-10: var(--step-10);

//media queries
@mobile: ~"(max-width: 480px)";
@tablet: ~"(max-width: 768px)";
@tablet-horiz: ~"(max-width: 1024px)";
@phone-horiz: ~"(max-width:670px)";
@text-width: ~"(max-width: 730px)";
@widthmax: ~"(max-width: 1000000px)";

@vert: ~"(orientation: portrait)";
@lscape: ~"(orientation: lanscape)";

//serif
@hed: "Tiempos Headline Light", Georgia, serif;
@alt-hed: "Tiempos Headline Black", Georgia, serif;
@serif-book: "Tiempos Regular", Georgia, serif;
@serif-bold: "Tiempos Bold", Georgia, serif;
@base-font-size: @step-0;

//sansserif
@sans-light: "National Light", Helvetica, sans-serif;
@sans-book: "National Book", Helvetica, sans-serif;
@sans-med: "National Medium", Helvetica, sans-serif;
@sans-bold: "National Bold", Helvetica, sans-serif;


//colors
@brand: #2CB9BF;
@primary: #388EF4;
@white: #FFFFFF;
@black: #000000;
@text: #222222;
@accent: #60849D;
@off-white: #FCFCFC;
@light-gray: #ECECEC;
@gray: #999999;
@dark-gray: #444444;
@med-gray: #777777;
@red: #CB0024;

// accessibility styles from https://github.com/mike-engel/a11y-css-reset/
/* https://medium.com/@matuzo/writing-css-with-accessibility-in-mind-8514a0007939 */
.visually-hidden() {
  position: absolute;
  white-space: nowrap;
  width: 1px;
  height: 1px;
  overflow: hidden;
  border: 0;
  padding: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  margin: -1px;
}

/* https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html */
.plain-list() {
  list-style: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E");
  padding-left: 0;
}

@import (less) './variables.less';

//sizing and spacing tachyons
.text-width {
    max-width: @md;
    padding: 0 @s16;
    margin-left: auto;
    margin-right: auto;
}

.mb-xxs {margin-bottom: @s4;}
.mb-xs {margin-bottom: @s8;}
.mb-sm {margin-bottom: @s16;}
.mb-md {margin-bottom: @s24;}
.mb-lg {margin-bottom: @s32;}
.mb-xl {margin-bottom: @s40;}
.mb-xxl {margin-bottom: @s48;}
.mb-auto {margin-bottom: auto;}

.mt-xxs {margin-top: @s4;}
.mt-xs {margin-top: @s8;}
.mt-sm {margin-top: @s16;}
.mt-md {margin-top: @s24;}
.mt-lg {margin-top: @s32;}
.mt-xl {margin-top: @s40;}
.mt-xxl {margin-top: @s48;}
.mt-auto {margin-top: auto;}

.mr-xxs {margin-right: @s4;}
.mr-xs {margin-right: @s8;}
.mr-sm {margin-right: @s16;}
.mr-md {margin-right: @s24;}
.mr-lg {margin-right: @s32;}
.mr-xl {margin-right: @s40;}
.mr-xxl {margin-right: @s48;}
.mr-auto {margin-right: auto;}

.ml-xxs {margin-left: @s4;}
.ml-xs {margin-left: @s8;}
.ml-sm {margin-left: @s16;}
.ml-md {margin-left: @s24;}
.ml-lg {margin-left: @s32;}
.ml-xl {margin-left: @s40;}
.ml-xxl {margin-left: @s48;}
.ml-auto {margin-left: auto;}

.ma-xxs {margin: @s4;}
.ma-xs {margin: @s8;}
.ma-sm {margin: @s16;}
.ma-md {margin: @s24;}
.ma-lg {margin: @s32;}
.ma-xl {margin: @s40;}
.ma-xxl {margin: @s48;}
.ma-auto {margin: auto;}

//padding
.pb-xxs {padding-bottom: @s4;}
.pb-xs {padding-bottom: @s8;}
.pb-sm {padding-bottom: @s16;}
.pb-md {padding-bottom: @s24;}
.pb-lg {padding-bottom: @s32;}
.pb-xl {padding-bottom: @s40;}
.pb-xxl {padding-bottom: @s48;}

.pt-xxs {padding-top: @s4;}
.pt-xs {padding-top: @s8;}
.pt-sm {padding-top: @s16;}
.pt-md {padding-top: @s24;}
.pt-lg {padding-top: @s32;}
.pt-xl {padding-top: @s40;}
.pt-xxl {padding-top: @s48;}

.pr-xxs {padding-right: @s4;}
.pr-xs {padding-right: @s8;}
.pr-sm {padding-right: @s16;}
.pr-md {padding-right: @s24;}
.pr-lg {padding-right: @s32;}
.pr-xl {padding-right: @s40;}
.pr-xxl {padding-right: @s48;}

.pl-xxs {padding-left: @s4;}
.pl-xs {padding-left: @s8;}
.pl-sm {padding-left: @s16;}
.pl-md {padding-left: @s24;}
.pl-lg {padding-left: @s32;}
.pl-xl {padding-left: @s40;}
.pl-xxl {padding-left: @s48;}

.pa-xxs {padding: @s4;}
.pa-xs {padding: @s8;}
.pa-sm {padding: @s16;}
.pa-md {padding: @s24;}
.pa-lg {padding: @s32;}
.pa-xl {padding: @s40;}
.pa-xxl {padding: @s48;}

.mw-sm {max-width: @sm;}
.mw-md {max-width: @md;}
.mw-lg {max-width: @lg;}
.mw-xl {max-width: @xl;}
.mw-100 {max-width: 100%;}

//alignment
.center {text-align: center;}
.left {text-align: left;}
.right {text-align: right;}


// accessibility styles from https://github.com/mike-engel/a11y-css-reset/
/* https://medium.com/@matuzo/writing-css-with-accessibility-in-mind-8514a0007939 */
.visually-hidden() {
  position: absolute;
  white-space: nowrap;
  width: 1px;
  height: 1px;
  overflow: hidden;
  border: 0;
  padding: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  margin: -1px;
}

/* https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html */
.plain-list() {
  list-style: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E");
  padding-left: 0;
}