:root {
    --ab-brand-green: #023E43; /* Not used for AB tile colours, but on website, brand elements. See https://sites.google.com/agilechilli.com/agilebasebrandguidelines */
    --ab-gray: #094859; /* rgba(28,28,28,1) */
    --ab-blue: #094859;
    --ab-blue-dark: #094859;
    --ab-blue2: #607776;
    --ab-pink: #D0A6A5;
    --ab-pink2: #CAB0A4;
    --ab-pink-dark: #513A66;
    --ab-green: #80A499;
    --ab-green2: #CFD7CE;
    --ab-green-dark: #208374; /* #023E43; */ /* Make dark green easily distinguishable from dark blue, so tables and views can be differentiated in the development interface */
    --ab-yellow: #DBB86E;
    --ab-yellow2: #ECE2B6;
    --ab-yellow-dark: #513A66;
    --ab-purple: #513A66;
    --ab-purple2: #8E9C94;
    --ab-turquoise: #1C5B6D;
    --ab-turquoise2: #ECF4F6;


    /* Highlight colours for good/bad words etc. */
    --ab-pink-highlight: #A53C49;
    --ab-blue-highlight: #1580A4;
    --ab-yellow-highlight: #D56445;
    --ab-green2-highlight: #208374;
    --yellow-wash-highlight: url('simple/sunset_orange.jpeg');
    --green2-wash-highlight: url('simple/celadon_green.jpeg');
    --pink-wash-highlight: url('simple/english_red.jpeg');
    --blue-wash-highlight: url('simple/sapphire_blue.jpeg');

    --ab-blue-light: rgba(9,72,89,0.1);
    --ab-blue2-light: rgba(98, 119, 118,0.1);
    --ab-turquoise-light: rgba(28,91,109,0.1);
    --ab-turquoise2-light: rgba(236,244,246,0.1);
    --ab-green-light: rgba(128,164,153,0.1);
    --ab-green2-light: rgba(207,215,206,0.1);
    --ab-pink-light: rgba(208,166,165,0.1);
    --ab-pink2-light: rgba(202,176,164,0.1);
    --ab-purple-light: rgba(81,58,102,0.1);
    --ab-purple2-light: rgba(142,156,148,0.1);
    --ab-yellow-light: rgba(219,184,110,0.1);
    --ab-yellow2-light: rgba(236,226,182,0.1);
    --ab-coral-light: rgba(224,71,75,0.1);
    --ab-orange-light: rgba(244,158,63,0.1);
    --ab-lime-light: rgba(155,204,85,0.1);
    --ab-corn-light: rgba(242,206,74,0.1);
    --ab-gray-light: rgba(101,103,102,0.1);

    --blue-wash: url('simple/ab-dark-blue.png');
    --blue2-wash: url('simple/ab-dark-blue.png');
    --pink-wash: url('simple/ab-pink.png');
    --pink2-wash: url('simple/ab-pink.png');
    --green-wash: url('simple/ab-olive.png');
    --green2-wash: url('simple/ab-light-olive.jpg');
    --yellow-wash: url('simple/ab-pink.png');
    --yellow2-wash: url('simple/ab-light-olive.jpg'); /* url('simple/ab-pink.png'); */
    --purple-wash: url('simple/ab-dark-blue.png');
    --purple2-wash: url('simple/ab-dark-blue.png');
    --turquoise-wash: url('simple/ab-olive.png');
    --turquoise2-wash: url('simple/ab-olive.png');

    --olive-wash: url('simple/ab-light-olive.jpg');
}

/* Dark colour on light backgrounds */
#tiles .turquoise2, #tiles .green2, #tiles .yellow, #tiles .pink, #tiles .yellow2, #tiles .pink2 {
    color: var(--ab-gray);
}

/* Dark colour on light backgrounds  - nav */
#tiles .turquoise2 nav li.selected, #tiles .green2 nav li.selected, #tiles .yellow nav li.selected, #tiles .pink nav li.selected, #tiles .yellow2 nav li.selected, #tiles .pink2 nav li.selected {
    color: black;
}

#tiles .green {
    color: black;
}

#progression_panel_content .turquoise2, #progression_panel_content .green2, #progression_panel_content .yellow, #tiles .pink, #progression_panel_content .yellow2, #progression_panel_content .pink2 {
    color: var(--ab-gray);
}

.tile .selectorReport table#reportData td.coloured.turquoise2, .tile .selectorReport table#reportData td.coloured.green2, .tile .selectorReport table#reportData td.coloured.yellow, .tile .selectorReport table#reportData td.coloured.pink, .tile .selectorReport table#reportData td.coloured.yellow2, .tile .selectorReport table#reportData td.coloured.pink2 {
    color: var(--ab-gray);
}

#progression_panel_content .turquoise2 a, #progression_panel_content .green2 a, #progression_panel_content .yellow a, #tiles .pink, #progression_panel_content .yellow2 a, #progression_panel_content .pink2 a {
    color: var(--ab-gray);
}

#tiles .tile .comment_tag.turquoise2 a, #tiles .tile .comment_tag.green2 a, #tiles .tile .comment_tag.yellow a, #tiles .tile .comment_tag.pink a, #tiles .tile .comment_tag.yellow2 a, #tiles .tile .comment_tag.pink2 a {
    color: var(--ab-gray);
}

/* But not for buttons */
#tiles button.green2, #tiles button.yellow, #tiles button.pink {
    color: white;
}

.turquoise2_fg > i, i.turquoise2_fg, .green2_fg > i, i.green2_fg, .yellow_fg > i, i.yellow_fg, .yellow2_fg > i, i.yellow2_fg, .pink_fg > i, i.pink_fg, .pink2_fg > i, i.pink2_fg {
    color: var(--ab-gray)!important;
}

#tiles .turquoise2_fg {
    color: var(--ab-turquoise)!important;
}

#tiles .green2_fg {
    color: var(--ab-gray)!important;
}

#tiles .yellow_fg, #tiles .yellow2_fg {
    color: var(--ab-gray)!important;
}

#tiles .pink_fg, #tiles .pink2_fg {
    color: var(--ab-pink-dark)!important;
}

#tiles .fc-event.turquoise2, #tiles #reportData .block.turquoise2, #tiles .fc-event.green2, #tiles #reportData .block.green2, #tiles .fc-event.yellow, #tiles #reportData .block.pink, #tiles .fc-event.yellow2, #tiles #reportData .block.pink2 {
    color: var(--ab-gray);
}

/* Mid-range cases: foreground text should be gray only when on a white background */
#tiles .comment_body.green_fg, #tiles .comment_body.purple2_fg {
    color: var(--ab-gray);
}

.pink_wash.contains_mandated, .pink_wash.flagged {
    background-image: var(--pink-wash-highlight);
}

.yellow_wash.flagged {
    background-image: var(--yellow-wash-highlight);
}

.green2_wash.flagged {
    background-image: var(--green2-wash-highlight);
}

.blue_wash.flagged {
    background-image: var(--blue-wash-highlight);
}