/**
 * walkin-theme-catalina variables
 * Override these in your project for theming.
 */
:root {
	--color-10: #379BD7;
	--color-10-lighten-5: #4da9de;
	--color-10-lighten-10: #63b7e5;
	--color-20: #00244D;
	--color-20-lighten-5: #0a3460;
	--color-20-lighten-10: #164573;
	--color-30: #D50E52;
	--color-30-lighten-5: #dd2865;
	--color-30-lighten-10: #e44278;
	--color-40: #F0F3F7;
	--color-40-darken-3: #e7ebf0;
	--color-50: #DCE1E3;
	--color-50-darken-3: #d3d8db;
	--color-60: #00B777;
	--color-60-lighten-5: #19bd84;
	--color-70: #d4f5e9;
	--color-80: #D50E52;
	--color-80-lighten-5: #dd2865;
	--color-80-lighten-10: #e44278;
	--color-90: #DCE1E3;
	--color-100: #F04B05;
	--color-gold: #ddbc69; /* sd-gold, warning */
	--color-border: #DCE1E3;
	--color-page: #fff;
	--color-text: #00244D;
	--color-text-muted: #566A7C;
	/* Light tint of primary for banners / subtle UI */
	--color-banner-tint: #e8eef5;
	--container-width: 1200px;  /* header, content */
	--container-wide: 1600px;  /* tables, data views */
	--container-browse: 1200px;  /* browse product grid */
}

/* Color palette swatches (for style guide demo) */
.at-swatch-10 { background: var(--color-10); }
.at-swatch-20 { background: var(--color-20); }
.at-swatch-30 { background: var(--color-30); }
.at-swatch-40 { background: var(--color-40); }
.at-swatch-50 { background: var(--color-50); }
.at-swatch-60 { background: var(--color-60); }
.at-swatch-80 { background: var(--color-80); }
.at-swatch-gold { background: var(--color-gold); }