﻿/********************************************
  COLOR SCHEMA                                
*********************************************
  Schema are intended to be mixed, and some     
  will specifically be for mixing.              
********************************************/


/***********
  CENTRALS
***********/

.tx-paper { color: hsla(0, 0%, 95%, 1); }
.tx-silver { color: hsla(0, 0%, 75%, 1); }
.tx-gray { color: hsla(0, 0%, 55%, 1); }
.tx-steel { color: hsla(0, 0%, 35%, 1); }
.tx-charcoal { color: hsla(0, 0%, 15%, 1); }

.bg-paper { background: hsla(0, 0%, 95%, 1); }
.bg-silver { background: hsla(0, 0%, 75%, 1); }
.bg-gray { background: hsla(0, 0%, 55%, 1); }
.bg-steel { background: hsla(0, 0%, 35%, 1); }
.bg-charcoal { background: hsla(0, 0%, 15%, 1); }

.bg-paper-film { background: hsla(0, 0%, 95%, 0.7); }
.bg-silver-film { background: hsla(0, 0%, 75%, 0.7); }
.bg-gray-film { background: hsla(0, 0%, 55%, 0.7); }
.bg-steel-film { background: hsla(0, 0%, 35%, 0.7); }
.bg-charcoal-film { background: hsla(0, 0%, 15%, 0.7); }

.bg-paper-glass { background: hsla(0, 0%, 95%, 0.3); }
.bg-silver-glass { background: hsla(0, 0%, 75%, 0.3); }
.bg-gray-glass { background: hsla(0, 0%, 55%, 0.3); }
.bg-steel-glass { background: hsla(0, 0%, 35%, 0.3); }
.bg-charcoal-glass { background: hsla(0, 0%, 15%, 0.3); }


/********************************
  RED EARTH VARIATIONS           
*********************************
  Main:  hsla(15, 100%, 40%, 1)  
********************************/

.tx-dirt { color: hsla(15, 100%, 40%, 1); }
.tx-dirt-dark { color: hsla(15, 100%, 30%, 1); }
.tx-dirt-bright { color: hsla(15, 100%, 50%, 1); }
.tx-dirt-dull { color: hsla(15, 80%, 40%, 1); }
.tx-dirt-dim { color: hsla(15, 50%, 40%, 1); }

.bg-dirt { background: hsla(15, 100%, 40%, 1); }
.bg-dirt-film { background: hsla(15, 100%, 40%, 0.7); }
.bg-dirt-glass { background: hsla(15, 100%, 40%, 0.3); }
.bg-dirt-bright { background: hsla(15, 100%, 50%, 1); }
.bg-dirt-bright-film { background: hsla(15, 100%, 50%, 0.7); }
.bg-dirt-bright-glass { background: hsla(15, 100%, 50%, 0.3); }


/*********************************
  RICH BLUE VARIATIONS
**********************************
  Main:  hsla(245, 100%, 40%, 1)
*********************************/

.tx-blue { color: hsla(245, 100%, 40%, 1); }
.tx-blue-dark { color: hsla(245, 100%, 30%, 1); }
.tx-blue-bright { color: hsla(245, 100%, 50%, 1); }
.tx-blue-dull { color: hsla(245, 80%, 40%, 1); }
.tx-blue-dim { color: hsla(245, 50%, 40%, 1); }

.bg-blue { background: hsla(245, 100%, 40%, 1); }
.bg-blue-film { background: hsla(245, 100%, 40%, 0.7); }
.bg-blue-glass { background: hsla(245, 100%, 40%, 0.3); }
.bg-blue-bright { background: hsla(245, 100%, 50%, 1); }
.bg-blue-bright-film { background: hsla(245, 100%, 50%, 0.7); }
.bg-blue-bright-glass { background: hsla(245, 100%, 50%, 0.3); }


/********************************
  GOLD VARIATIONS
*********************************
  Main:  hsla(50, 100%, 40%, 1)
********************************/

.tx-gold { color: hsla(50, 100%, 40%, 1); }
.tx-gold-dark { color: hsla(50, 100%, 30%, 1); }
.tx-gold-bright { color: hsla(50, 100%, 50%, 1); }
.tx-gold-dull { color: hsla(50, 80%, 40%, 1); }
.tx-gold-dim { color: hsla(50, 50%, 40%, 1); }

.bg-gold { background: hsla(50, 100%, 40%, 1); }
.bg-gold-film { background: hsla(50, 100%, 40%, 0.7); }
.bg-gold-glass { background: hsla(50, 100%, 40%, 0.3); }
.bg-gold-bright { background: hsla(50, 100%, 50%, 1); }
.bg-gold-bright-film { background: hsla(50, 100%, 50%, 0.7); }
.bg-gold-bright-glass { background: hsla(50, 100%, 50%, 0.3); }


/**********************************
  LEAF GREEN                     
***********************************
  Main: hsla(130, 100%, 30%, 1)  
**********************************/

.tx-leaf { color: hsla(130, 100%, 40%, 1); }
.tx-leaf-dark { color: hsla(130, 100%, 30%, 1); }
.tx-leaf-bright { color: hsla(130, 100%, 50%, 1); }
.tx-leaf-dull { color: hsla(130, 80%, 40%, 1); }
.tx-leaf-dim { color: hsla(130, 50%, 40%, 1); }

.bg-leaf { background: hsla(130, 100%, 40%, 1); }
.bg-leaf-film { background: hsla(130, 100%, 40%, 0.7); }
.bg-leaf-glass { background: hsla(130, 100%, 40%, 0.3); }
.bg-leaf-dark { background: hsla(130, 100%, 30%, 1); }
.bg-leaf-dark-film { background: hsla(130, 100%, 30%, 0.7); }
.bg-leaf-dark-glass { background: hsla(130, 100%, 30%, 0.3); }


/******************
  SHADED NEUTRALS  
******************/

.tx-ivory { color: hsla(60, 100%, 97%, 1); }
.tx-sand { color: hsla(50, 100%, 97%, 1); }
.tx-mint { color: hsla(130, 100%, 97%, 1); }
.tx-dogwood { color: hsla(330, 100%, 97%, 1); }
.tx-foam { color: hsla(250, 100%, 97%, 1); }

.bg-ivory { background: hsla(60, 100%, 97%, 1); }
.bg-sand { background: hsla(50, 100%, 97%, 1); }
.bg-mint { background: hsla(130, 100%, 97%, 1); }
.bg-dogwood { background: hsla(330, 100%, 97%, 1); }
.bg-foam { background: hsla(250, 100%, 97%, 1); }

.bg-ivory-glass { background: hsla(60, 100%, 90%, 0.3); }
.bg-sand-glass { background: hsla(50, 100%, 90%, 0.3); }
.bg-mint-glass { background: hsla(130, 100%, 90%, 0.3); }
.bg-dogwood-glass { background: hsla(330, 100%, 90%, 0.3); }
.bg-foam-glass { background: hsla(250, 100%, 90%, 0.3); }


/******
  STRIPES
******/

.stripes { background-size: 8px 8px; }

.angled { background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.2) 24.7%, transparent 25.3%, transparent 49.7%, rgba(255, 255, 255, 0.2) 50.3%, rgba(255, 255, 255, 0.2) 74.7%, transparent 75.3%, transparent); }