// Gray shapes
// Variable pattern: @color-<color>-<modifier>
@color-black:       #000;
@color-gray:        #ccc;
@color-gray-light:  #f0f0f0;
@color-gray-bright: #EBF2EB;
@color-gray-400:    #BCBCBC;
@color-jetstream:  #c3d9c4;
@color-white:       #fff;
@color-silver:      #999;
@color-silver-l14:  lighten(@color-black, 14%);
@color-silver-l20:  lighten(@color-black, 20%);
@color-silver-l30:  lighten(@color-black, 30%);
@color-silver-l40:  lighten(@color-black, 40%);
@color-silver-l50:  lighten(@color-black, 50%);
@color-silver-l60:  lighten(@color-black, 60%);
@color-silver-l70:  lighten(@color-black, 70%);
@color-silver-l80:  lighten(@color-black, 80%);
@color-silver-l85:  lighten(@color-black, 85%);
@color-silver-l90:  lighten(@color-black, 90%);
@color-silver-l95:  lighten(@color-black, 95%);
@color-silver-l98:  lighten(@color-black, 98%);
@color-silver-dark: #333;

// Brand colors
// Variable pattern: @color-<color>-<modifier>
@color-black-matomo:               #0d0d0d;
@color-blue-matomo:                #4183C4;
@color-red-matomo:                 #d2312d;
@color-green-matomo:               #43a047;

// @todo remove those bc colors in Matomo 6
@color-black-piwik:               @color-black-matomo;
@color-blue-piwik:                @color-blue-matomo;
@color-red-piwik:                 @color-red-matomo;
@color-green-piwik:               @color-green-matomo;

@color-green-brandSocial:         #009874;
@color-blue-brandSocial:          #3b5998;
@color-blue-brandSocialLight:     #1c87bd;
@color-blue-brandSocialVeryLight: #00aced;
@color-orange-brand:              #f57c00;

// see https://material.io/design/color/#tools-for-picking-colors for source for colors
@graph-colors-data-series0: #0277BD; // light blue 50 series (800)
@graph-series0-shade1-color: #40C4FF; // (A200)
@graph-series0-shade2-color: #00B0FF; // (A400)
@graph-series0-shade3-color: #0091EA; // (A700)

@graph-colors-data-series1: #FF8F00; // amber 50 series (800)
@graph-series1-shade1-color: #FFD740; // (A200)
@graph-series1-shade2-color: #FFC400; // (A400)
@graph-series1-shade3-color: #FFAB00; // (A700)

@graph-colors-data-series2: #AD1457; // pink 50 series (800)
@graph-series2-shade1-color: #FF4081; // (A200)
@graph-series2-shade2-color: #F50057; // (A400)
@graph-series2-shade3-color: #C51162; // (A700)

@graph-colors-data-series3: #6A1B9A; // purple 50 series (800)
@graph-series3-shade1-color: #E040FB; // (A200)
@graph-series3-shade2-color: #D500F9; // (A400)
@graph-series3-shade3-color: #AA00FF; // (A700)

@graph-colors-data-series4: #558B2F; // light green 50 series (800)
@graph-series4-shade1-color: #B2FF59; // (A200)
@graph-series4-shade2-color: #76FF03; // (A400)
@graph-series4-shade3-color: #64DD17; // (A700)

@graph-colors-data-series5: #00838F; // cyan 50 series (800)
@graph-series5-shade1-color: #18FFFF; // (A200)
@graph-series5-shade2-color: #00E5FF; // (A400)
@graph-series5-shade3-color: #00B8D4; // (A700)

@graph-colors-data-series6: #283593; // indigo 50 series (800)
@graph-series6-shade1-color: #536DFE; // (A200)
@graph-series6-shade2-color: #3D5AFE; // (A400)
@graph-series6-shade3-color: #304FFE; // (A700)

@graph-colors-data-series7: #D84315; // deep orange 50 series (800)
@graph-series7-shade1-color: #FF6E40; // (A200)
@graph-series7-shade2-color: #FF3D00; // (A400)
@graph-series7-shade3-color: #DD2C00; // (A700)

// Base graph colors used by the evolution/bar/pie chart palette.
// We reused the series shade(shade1, shade2, shade3) colours above because they are identical
@graph-series0-color: #57B1FF;
@graph-series1-color: @graph-colors-data-series1;
@graph-series2-color: #A60F58;
@graph-series3-color: #7A45E6;
@graph-series4-color: #56CA00;
@graph-series5-color: #35C4C4;
@graph-series6-color: @graph-colors-data-series6;
@graph-series7-color: #F56E2F;

// Sparkline colors. Intentionally independent from the @graph-seriesN-color chart
// palette above so the two are no longer linked. Min/max dots read as
// negative/positive; the last dot matches the line.
@graph-sparkline-line-color:    #3B82F6;
@graph-sparkline-minDot-color:  @color-red-matomo;           // #d2312d — lowest value (negative)
@graph-sparkline-maxDot-color:  @color-green-matomo;         // #43a047 — highest value (positive)
@graph-sparkline-lastDot-color: @graph-sparkline-line-color; // last value — same as the line

@default-box-shade: 0 2px 3px 0 rgba(0,0,0,0.16), 0 0px 3px 0 rgba(0,0,0,0.12);

/*
Qualitative data color series inspired from colorbrewer2.org/
next ones could be: #cab2d6 #ffff99 # #b2df8a
*/
