/*
 * Copyright 2015-2016 Firefly Semantics Corporation
 * Copyright 2015-2016 Ole Ersoy
 * Copyright 2015-2016 superfly-css
 * Copyright 2011-2015 Twitter, Inc.
 */

/*! superfly-css-variables-colors | MIT License | https://github.com/superfly-css/superfly-css-variables-colors/blob/master/LICENSE.md */
/*! bootstrap v4.0.0-alpha | MIT License | https://github.com/twbs/bootstrap/blob/master/LICENSE */

/* =======================================
   COLORS
   0: Percentages used in color calculations
   1: Spectrum of grays
   2: Notification colors
   3: Global style colors for links, etc.
   4: Feedback states
   5: Superfly CSS Colors
   6: Browser supported color names
   7: Three digit color codes
   --------------------------------------
   -- Naming Conventions --
   --------------------------------------
   All shared color variables are prefixed with
   `color-`.
   All percentages are prefixed with
   `percentage-`.
   --------------------------------------
    -- Weighted Color Naming System --
   --------------------------------------
   The spectrum of colors for grays use the
   symbolic number weights
   [100, 300, 400, 500, 600, 700, 900].

   The notification colors use the symbolic weights
   [100, 300, 500, 700, 900].
   ======================================= */

/* 0 */
:root {
  --percentage-lightest:  91%;
  --percentage-lighter:   78%;
  --percentage-light:     65%;
  --percentage-median:    52%;
  --percentage-dark:      39%;
  --percentage-darker:    26%;
  --percentage-darkest:   13%;

  --percentage-low: 25%;
  --percentage-high:  50%;

  --percentage-link-hover: 25%;
}

/* 1 */
:root {
  --color-gray-base: #000;

  --color-gray-lightest: color(var(--color-gray-base) lightness(var(--percentage-lightest)));
  --color-gray-lighter:  color(var(--color-gray-base) lightness(var(--percentage-lighter)));
  --color-gray-light:    color(var(--color-gray-base) lightness(var(--percentage-light)));
  --color-gray:          color(var(--color-gray-base) lightness(var(--percentage-median)));
  --color-gray-dark:     color(var(--color-gray-base) lightness(var(--percentage-dark)));
  --color-gray-darker:   color(var(--color-gray-base) lightness(var(--percentage-darker)));
  --color-gray-darkest:  color(var(--color-gray-base) lightness(var(--percentage-darkest)));

  --color-gray-100: var(--color-gray-lightest);
  --color-gray-300: var(--color-gray-lighter);
  --color-gray-400: var(--color-gray-light);
  --color-gray-500: var(--color-gray);
  --color-gray-600: var(--color-gray-dark);
  --color-gray-700: var(--color-gray-darker);
  --color-gray-900: var(--color-gray-darkest);
}

/* 2 */
:root {
  --color-primary:         #0275d8;
  --color-success:         #5cb85c;
  --color-info:            #5bc0de;
  --color-warning:         #f0ad4e;
  --color-danger:          #d9534f;
}

:root {
  --color-primary-100: color(var(--color-primary) whiteness(var(--percentage-high)));
  --color-primary-300: color(var(--color-primary) whiteness(var(--percentage-low)));
  --color-primary-500: var(--color-primary);
  --color-primary-700: color(var(--color-primary) blackness(var(--percentage-low)));
  --color-primary-900: color(var(--color-primary) blackness(var(--percentage-high)));

  --color-success-100: color(var(--color-success) whiteness(var(--percentage-high)));
  --color-success-300: color(var(--color-success) whiteness(var(--percentage-low)));
  --color-success-500: var(--color-success);
  --color-success-700: color(var(--color-success) blackness(var(--percentage-low)));
  --color-success-900: color(var(--color-success) blackness(var(--percentage-high)));

  --color-info-100: color(var(--color-info) whiteness(var(--percentage-high)));
  --color-info-300: color(var(--color-info) whiteness(var(--percentage-low)));
  --color-info-500: var(--color-info);
  --color-info-700: color(var(--color-info) blackness(var(--percentage-low)));
  --color-info-900: color(var(--color-info) blackness(var(--percentage-high)));

  --color-warning-100: color(var(--color-warning) whiteness(var(--percentage-high)));
  --color-warning-300: color(var(--color-warning) whiteness(var(--percentage-low)));
  --color-warning-500: var(--color-warning);
  --color-warning-700: color(var(--color-warning) blackness(var(--percentage-low)));
  --color-warning-900: color(var(--color-warning) blackness(var(--percentage-high)));

  --color-danger-100: color(var(--color-danger) whiteness(var(--percentage-high)));
  --color-danger-300: color(var(--color-danger) whiteness(var(--percentage-low)));
  --color-danger-500: var(--color-danger);
  --color-danger-700: color(var(--color-danger) blackness(var(--percentage-low)));
  --color-danger-900: color(var(--color-danger) blackness(var(--percentage-high)));
}

/* 3 */
:root {
  --color-white:                   #fff;
  --color-text:                    var(--color-gray-dark);
  --color-text-muted:              var(--color-gray-light);
  --color-link:                    var(--color-primary);
  --color-link-hover:              color(var(--color-link) blackness(var(--percentage-link-hover)));
  --color-abbr-border:             var(--color-gray-light);
  --color-table-background:        transparent;
  --color-table-background-accent: #f9f9f9;
  --color-table-background-hover:  #f5f5f5;
  --color-table-background-active: var(--color-table-background-hover);
  --color-table-border-color:      var(--color-gray-lighter);
}

/* 4 */
:root {
  --state-success-text:        #3c763d;
  --state-success-background:  #dff0d8;
  --state-success-border:      color(var(--state-success-background) blackness(5%));

  --state-info-text:           #31708f;
  --state-info-background:     #d9edf7;
  --state-info-border:         color(var(--state-info-background) blackness(7%));

  --state-warning-text:        #8a6d3b;
  --state-warning-background:  #fcf8e3;
  --state-warning-border:      color(var(--state-warning-background) blackness(5%));

  --state-danger-text:         #a94442;
  --state-danger-background:   #f2dede;
  --state-danger-border:       color(var(--state-danger-background) blackness(5%));
}


/* 5 */
:root {
  --color-neon-mustard: #e1eb10;
  --color-soft-white: #F8F8F7;
  --color-tomato-red: #E1332D;
  --color-purple-pink: #e91e63;
  --color-light-orange-red: #ff5722;
  --color-silver-grey: #9e9e9e;
}

/* 6 */
:root {
  --color-alice-blue: AliceBlue;
  --color-antique-white: AntiqueWhite;
  --color-aqua: Aqua;
  --color-aqua-marine: AquaMarine;
  --color-azure: Azure;
  --color-beige: Beige;
  --color-bisque: Bisque;
  --color-black: Black;
  --color-blanched-almond: BlanchedAlmond;
  --color-blue: Blue;
  --color-blue-violet: BlueViolet;
  --color-brown: Brown;
  --color-burly-wood: BurlyWood;
  --color-cadet-blue: CadetBlue;
  --color-chartreuse: Chartreuse;
  --color-chocolate: Chocolate;
  --color-coral: Coral;
  --color-corn-flower-blue: CornFlowerBlue;
  --color-cornsilk: Cornsilk;
  --color-crimson: Crimson;
  --color-cyan: Cyan;
  --color-dark-blue: DarkBlue;
  --color-dark-cyan: DarkCyan;
  --color-dark-golden-rod: DarkGoldenRod;
  --color-dark-gray: DarkGray;
  --color-dark-green: DarkGreen;
  --color-dark-khaki: DarkKhaki;
  --color-dark-magenta: DarkMagenta;
  --color-dark-olive-green: DarkOliveGreen;
  --color-dark-orange: DarkOrange;
  --color-dark-orchid: DarkOrchid;
  --color-dark-red: DarkRed;
  --color-dark-salmon: DarkSalmon;
  --color-dark-sea-green: DarkSeaGreen;
  --color-dark-slate-blue: DarkSlateBlue;
  --color-dark-slate-gray: DarkSlateGray;
  --color-dark-turquoise: DarkTurquoise;
  --color-dark-violet: DarkViolet;
  --color-deep-pink: DeepPink;
  --color-deep-sky-blue: DeepSkyBlue;
  --color-dim-gray: DimGray;
  --color-dodger-blue: DodgerBlue;
  --color-fire-brick: FireBrick;
  --color-floral-white: FloralWhite;
  --color-forest-green: ForestGreen;
  --color-fuchsia: Fuchsia;
  --color-gainsboro: Gainsboro;
  --color-ghost-white: GhostWhite;
  --color-gold: Gold;
  --color-golden-rod: GoldenRod;
  --color-gray: Gray;
  --color-green: Green;
  --color-green-yellow: GreenYellow;
  --color-honey-dew: HoneyDew;
  --color-hot-pink: HotPink;
  --color-indian-red: IndianRed;
  --color-indigo: Indigo;
  --color-ivory: Ivory;
  --color-khaki: Khaki;
  --color-lavender: Lavender;
  --color-lavender-blush: LavenderBlush;
  --color-lawn-green: LawnGreen;
  --color-lemon-chiffon: LemonChiffon;
  --color-light-blue: LightBlue;
  --color-light-coral: LightCoral;
  --color-light-cyan: LightCyan;
  --color-light-goldenrod-yellow: LightGoldenrodYellow;
  --color-light-gray: LightGray;
  --color-light-green: LightGreen;
  --color-light-pink: LightPink;
  --color-light-salmon: LightSalmon;
  --color-light-sea-green: LightSeaGreen;
  --color-light-sky-blue: LightSkyBlue;
  --color-light-slate-gray: LightSlateGray;
  --color-light-steel-blue: LightSteelBlue;
  --color-light-yellow: LightYellow;
  --color-lime: Lime;
  --color-lime-green: LimeGreen;
  --color-linen: Linen;
  --color-magenta: Magenta;
  --color-maroon: Maroon;
  --color-medium-aquamarine: MediumAquaMarine;
  --color-medium-blue: MediumBlue;
  --color-medium-orchid: MediumOrchid;
  --color-medium-purple: MediumPurple;
  --color-medium-sea-green: MediumSeaGreen;
  --color-medium-slate-blue: MediumSlateBlue;
  --color-medium-spring-green: MediumSpringGreen;
  --color-medium-turquoise: MediumTurquoise;
  --color-medium-violet-red: MediumVioletRed;
  --color-midnight-blue: MidnightBlue;
  --color-mint-cream: MintCream;
  --color-misty-rose: misty-rose;
  --color-moccasin: Moccasin;
  --color-navajo-white: NavajoWhite;
  --color-navy: Navy;
  --color-old-lace: OldLace;
  --color-olive: Olive;
  --color-olive-drab: OliveDrab;
  --color-orange: Orange;
  --color-orange-red: OrangeRed;
  --color-orchid: Orchid;
  --color-pale-golden-rod: PaleGoldenRod;
  --color-pale-green: PaleGreen;
  --color-pale-turquoise: PaleTurquoise;
  --color-pale-violet-red: PaleVioletRed;
  --color-papaya-whip: PapayaWhip;
  --color-peach-puff: PeachPuff;
  --color-peru: Peru;
  --color-pink: Pink;
  --color-plum: Plum;
  --color-powder-blue: PowderBlue;
  --color-purple: Purple;
  --color-red: Red;
  --color-rosy-brown: RosyBrown;
  --color-royal-blue: RoyalBlue;
  --color-saddle-brown: SaddleBrown;
  --color-salmon: Salmon;
  --color-sandy-brown: SandyBrown;
  --color-sea-green: SeaGreen;
  --color-sea-shell: SeaShell;
  --color-sienna: Sienna;
  --color-silver: Silver;
  --color-sky-blue: SkyBlue;
  --color-slate-blue: SlateBlue;
  --color-slate-gray: SlateGray;
  --color-snow: Snow;
  --color-spring-green: SpringGreen;
  --color-steel-blue: SteelBlue;
  --color-tan: Tan;
  --color-teal: Teal;
  --color-thistle: Thistle;
  --color-tomato: Tomato;
  --color-turquoise: Turquoise;
  --color-violet: Violet;
  --color-wheat: Wheat;
  --color-white: White;
  --color-white-smoke: WhiteSmoke;
  --color-yellow: Yellow;
  --color-yellow-green: YellowGreen;
}

/* 7 */
@for $a from 0 to 9 {
    @for $b from 0 to 9 {
          @for $c from 0 to 9 {
            :root {
            --color-$(a)$(b)$(c): #$(a)$(b)$(c);
            }
          }
    }
}