/**
##Variabls
@font-size-
@fsz-
(base, small, big, h1, h2, h3, h4 ,h5, h5, blockquote, cite,figcaption,sub,sup)

@font-weight
@fw-
(base, em, strong, 100,200,300,400,500,600,700,800)

@font-family
@ff-
(primary, secondary)

@font-style
@fst-
(italic, em, strong)

@color-@name
@c-@name
(primary, secondary, link, error, cta, …
    (-a1,-a9: alpha)
    (-1,-9: lighten)
)
//Example:
*/
.color-primary {
  color: #ED5565;
}
.color-primary-a1 {
  color: rgba(237, 85, 101, 0.1);
}
/*
.color-variation(@colors; @index) when (@index < @length) {
    @name  : extract(@colors, 1);
    @color : extract(@colors, 2);

    @color-@{name}: fade(@color,@index);

    .color-variation(@colors; (@index + 1));
}
.color-variation(@colors; @length);
  

@for (@i=1;@i<=9;@i++) {
    @colors-a@{i} {
        foreach(@colors as @key, @value) {
            color: fade(@colors[@key],@i0%);
        }
    }
}
*/
/*
//Usage:
@colors[primary];

@colors-a1[primary]
@colors-a9[primary];

@line-height-
@lh-
(base, small, big)

##Mixins
.

##Implementation
body {
    @font-weight-base
    @    
}

h1 {
    @fsz-
    @fw-
    @fst-
}
small, big, h2, h3, h4 ,h5, h5, blockquote, cite

.c-@color-@name {
    color: @c-@name
}
.c-@color-@name-a1 {
    color: rgba(@c-@name,.1);
}
.c-@color-@name-1 {
    color: lighten(@c-@name,.1);
}

.bg-@color-@name {
    background: @name;
}
*/