/* Road Tech variables and utility classes for all products */

:root {
    /* Palette colours */
    --rr-teal-800: #0F3D47;     /* text-darkest */
    --rr-teal-700: #1E5C68;     /* text-dark */
    --rr-teal-600: #2E7A88;     /* text */
    --rr-teal-500: #3F97A7;     /* base */
    --rr-teal-400: #3DA6B1;     /* accent */
    --rr-teal-300: #71BCCA;     /* border */
    --rr-teal-200: #E6F2F4;     /* bg */
    --rr-teal-100: #F2F9FA;     /* bg-subtle */
    --rr-grey-800: #55585B;     /* text */
    --rr-grey-300: #CCCCCC;     /* border */
    --rr-grey-100: #ECECED;     /* bg */
    --rr-yellow-800: #8A772E;   /* text-darkest */
    --rr-yellow-700: #AC9643;   /* text-dark */
    --rr-yellow-600: #CDB557;   /* text */
    --rr-yellow-500: #F1D566;   /* base */
    --rr-yellow-400: #F3DB7D;   /* accent */
    --rr-yellow-300: #F7ECC5;   /* border */
    --rr-yellow-200: #FAF5E6;   /* bg */
    --rr-yellow-100: #FDFAF3;   /* bg-subtle */
    --rr-green-800:  #3D6E51;   /* text-darkest */
    --rr-green-700:  #538D6B;   /* text-dark */
    --rr-green-600:  #68AB85;   /* text */
    --rr-green-500:  #7AC99D;   /* base */
    --rr-green-400:  #8ED1AC;   /* accent */
    --rr-green-300:  #C3E4D3;   /* border */
    --rr-green-200:  #E8F3ED;   /* bg */
    --rr-green-100:  #F4F9F6;   /* bg-subtle */
    --rr-blue-800:   #345E79;   /* text-darkest */
    --rr-blue-700:   #497B9C;   /* text-dark */
    --rr-blue-600:   #5E98BE;   /* text */
    --rr-blue-500:   #6FB3E0;   /* base */
    --rr-blue-400:   #85BEE5;   /* accent */
    --rr-blue-300:   #C3DDEF;   /* border */
    --rr-blue-200:   #E8F1F7;   /* bg */
    --rr-blue-100:   #F4F8FB;   /* bg-subtle */
    --rr-pink-800:   #6D406D;   /* text-darkest */
    --rr-pink-700:   #8E598E;   /* text-dark */
    --rr-pink-600:   #AF71AF;   /* text */
    --rr-pink-500:   #CE85CE;   /* base */
    --rr-pink-400:   #D597D5;   /* accent */
    --rr-pink-300:   #E7CAE7;   /* border */
    --rr-pink-200:   #F4EBF4;   /* bg */
    --rr-pink-100:   #FAF5FA;   /* bg-subtle */
    --rr-purple-800: #532748;   /* text-darkest */
    --rr-purple-700: #743564;   /* text-dark */
    --rr-purple-600: #954280;   /* text */
    --rr-purple-500: #AF4E96;   /* base */
    --rr-purple-400: #BB69A6;   /* accent */
    --rr-purple-300: #D3A2C7;   /* border */
    --rr-purple-200: #F4ECF2;   /* bg */
    --rr-purple-100: #FAF5F9;   /* bg-subtle */
    --rr-orange-800: #7D4626;   /* text-darkest */
    --rr-orange-700: #A55F37;   /* text-dark */
    --rr-orange-600: #CD7847;   /* text */
    --rr-orange-500: #F18D54;   /* base */
    --rr-orange-400: #F39E6E;   /* accent */
    --rr-orange-300: #F5CBB2;   /* border */
    --rr-orange-200: #FAEDE6;   /* bg */
    --rr-orange-100: #FDF6F3;   /* bg-subtle */
    --rr-cyan-800:   #347969;   /* text-darkest */
    --rr-cyan-700:   #499C89;   /* text-dark */
    --rr-cyan-600:   #5EBEA8;   /* text */
    --rr-cyan-500:   #6FE0C6;   /* base */
    --rr-cyan-400:   #85E5CF;   /* accent */
    --rr-cyan-300:   #C3EFE4;   /* border */
    --rr-cyan-200:   #E8F7F4;   /* bg */
    --rr-cyan-100:   #F4FBF9;   /* bg-subtle */
    --rr-white: #FFFFFF;
    --rr-black: #000000;
    
    /* Palette colours - other products */
    --tm-red-500:     #C11532;
    --tm-red-600:     #9A1028;
    --fl-magenta-500: #7E0066;
    --fl-magenta-600: #5E0050;
    --cm-green-500:   #89BF00;
    --cm-green-600:   #6A9400;
    --pd-amber-500:   #EF8300;
    --pd-amber-600:   #C46A00;
    
    /* Semantic - what the colour does (general UI roles) */
    --rr-colour-primary:        var(--rr-teal-500);
    --rr-colour-primary-dark:   var(--rr-teal-600);
    --rr-colour-primary-darker: var(--rr-teal-700);
    --rr-colour-primary-hover:  var(--rr-teal-300);
    --rr-colour-bg:             var(--rr-teal-200);
    --rr-colour-text:           var(--rr-teal-600);
    --rr-colour-text-muted:     var(--rr-teal-500);

    /* Semantic - other products */
    --tm-colour-primary: var(--tm-red-500);
    --tm-colour-primary-dark: var(--tm-red-600);
    --fl-colour-primary: var(--fl-magenta-500);
    --fl-colour-primary-dark: var(--fl-magenta-600);
    --cm-colour-primary: var(--cm-green-500);
    --cm-colour-primary-dark: var(--cm-green-600);
    --pd-colour-primary: var(--pd-amber-500);
    --pd-colour-primary-dark: var(--pd-amber-600);
    
    /* Semantic - named colours */
    --rr-colour-yellow:         var(--rr-yellow-500);
    --rr-colour-green:          var(--rr-green-500);
    --rr-colour-blue:           var(--rr-blue-500);
    --rr-colour-pink:           var(--rr-pink-500);
    --rr-colour-purple:         var(--rr-purple-500);
    --rr-colour-orange:         var(--rr-orange-500);
    --rr-colour-cyan:           var(--rr-cyan-500);

    /* Surface defaults (light) */
    --rr-surface-bg:            var(--rr-white); /* the bg colour appropriate for this surface */
    --rr-surface-text:          var(--rr-grey-800); /* the text colour appropriate for this surface */
    --rr-surface-btn-bg:        var(--rr-teal-500); /* the button backgrou colour appropriate for this surface */
    --rr-surface-btn-text:      var(--rr-white); /* the button text colour appropriate for this surface */
}

/* BACKGROUNDS with re-scope variables */
.rr-bg {
    --rr-surface-bg:            var(--rr-colour-bg);
    --rr-surface-text:          var(--rr-colour-primary);
    --rr-surface-btn-bg:        var(--rr-white);
    --rr-surface-btn-text:      var(--rr-colour-primary);

    background-color: var(--rr-surface-bg);
    color: var(--rr-surface-text);
}
.rr-bg-light-grey {
    --rr-surface-bg:            var(--rr-grey-100);
    --rr-surface-text:          var(--rr-black);
    --rr-surface-btn-bg:        var(--rr-white);
    --rr-surface-btn-text:      var(--rr-colour-primary);

    background-color: var(--rr-surface-bg);
    color: var(--rr-surface-text);
}
.rr-bg-primary {
    --rr-surface-bg:            var(--rr-colour-primary);
    --rr-surface-text:          var(--rr-white);
    --rr-surface-btn-bg:        var(--rr-white);
    --rr-surface-btn-text:      var(--rr-colour-primary);
    background-color: var(--rr-surface-bg);
    color: var(--rr-surface-text);
}   
.rr-bg-white { background-color: var(--rr-white); color: var(--rr-surface-text); }
.rr-bg-black { background-color: var(--rr-black); color: var(--rr-white); }
.rr-bg-yellow { background-color: var(--rr-yellow-200); color: var(--rr-yellow-600); }
.rr-bg-green { background-color: var(--rr-green-200); color: var(--rr-green-600); }
.rr-bg-blue { background-color: var(--rr-blue-200); color: var(--rr-blue-600); }
.rr-bg-pink { background-color: var(--rr-pink-200); color: var(--rr-pink-600); }
.rr-bg-purple { background-color: var(--rr-purple-200); color: var(--rr-purple-600); }
.rr-bg-orange { background-color: var(--rr-orange-200); color: var(--rr-orange-600); }
.rr-bg-cyan { background-color: var(--rr-cyan-200); color: var(--rr-cyan-600); }

/* border colours */
.rr-border { border-color: var(--rr-teal-400); }
.rr-border-yellow { border-color: var(--rr-yellow-400); }
.rr-border-green { border-color: var(--rr-green-400); }
.rr-border-blue { border-color: var(--rr-blue-400); }
.rr-border-pink { border-color: var(--rr-pink-400); }
.rr-border-purple { border-color: var(--rr-purple-400); }
.rr-border-orange { border-color: var(--rr-orange-400); }
.rr-border-cyan { border-color: var(--rr-cyan-400); }

/* button colour variants — combines bg + border + text in one class */
.btn.rr-btn-idle { background-color: var(--rr-white); }
.btn.rr-btn { background-color: var(--rr-teal-300); color: var(--rr-teal-800); border-color: var(--rr-teal-400); }
.btn.rr-btn-yellow { background-color: var(--rr-yellow-300); color: var(--rr-yellow-800); border-color: var(--rr-yellow-400); }
.btn.rr-btn-green { background-color: var(--rr-green-300); color: var(--rr-green-800); border-color: var(--rr-green-400); }
.btn.rr-btn-blue { background-color: var(--rr-blue-300); color: var(--rr-blue-800); border-color: var(--rr-blue-400); }
.btn.rr-btn-pink { background-color: var(--rr-pink-300); color: var(--rr-pink-800); border-color: var(--rr-pink-400); }
.btn.rr-btn-orange { background-color: var(--rr-orange-300); color: var(--rr-orange-800); border-color: var(--rr-orange-400); }
.btn.rr-btn:hover { background-color: var(--rr-teal-200); }
.btn.rr-btn-yellow:hover { background-color: var(--rr-yellow-200); }
.btn.rr-btn-green:hover { background-color: var(--rr-green-200); }
.btn.rr-btn-blue:hover { background-color: var(--rr-blue-200); }
.btn.rr-btn-pink:hover { background-color: var(--rr-pink-200); }
.btn.rr-btn-orange:hover { background-color: var(--rr-orange-200); }

.rr-br-gradient         { background: linear-gradient(25deg, var(--rr-colour-primary)      0%, var(--rr-colour-primary)      47%, var(--rr-colour-primary-dark) 48%, var(--rr-colour-primary-dark) 100%); }
.rr-br-gradient-yellow  { background: linear-gradient(25deg, var(--rr-yellow-500)  0%, var(--rr-yellow-500)  47%, var(--rr-yellow-600)  48%, var(--rr-yellow-600)  100%); }
.rr-br-gradient-green   { background: linear-gradient(25deg, var(--rr-green-500)   0%, var(--rr-green-500)   47%, var(--rr-green-600)   48%, var(--rr-green-600)   100%); }
.rr-br-gradient-blue    { background: linear-gradient(25deg, var(--rr-blue-500)    0%, var(--rr-blue-500)    47%, var(--rr-blue-600)    48%, var(--rr-blue-600)    100%); }
.rr-br-gradient-pink    { background: linear-gradient(25deg, var(--rr-pink-500)    0%, var(--rr-pink-500)    47%, var(--rr-pink-600)    48%, var(--rr-pink-600)    100%); }
.rr-br-gradient-purple  { background: linear-gradient(25deg, var(--rr-purple-500)  0%, var(--rr-purple-500)  47%, var(--rr-purple-600)  48%, var(--rr-purple-600)  100%); }
.rr-br-gradient-orange  { background: linear-gradient(25deg, var(--rr-orange-500)  0%, var(--rr-orange-500)  47%, var(--rr-orange-600)  48%, var(--rr-orange-600)  100%); }
.rr-br-gradient-cyan    { background: linear-gradient(25deg, var(--rr-cyan-500)    0%, var(--rr-cyan-500)    47%, var(--rr-cyan-600)    48%, var(--rr-cyan-600)    100%); }
.rr-br-gradient-multi { background: linear-gradient(25deg,
var(--tm-colour-primary)      0%,
var(--tm-colour-primary-dark) 12%,
var(--fl-colour-primary)      23%,
var(--fl-colour-primary-dark) 34%,
var(--rr-colour-primary)      45%,
var(--rr-colour-primary-dark) 56%,
var(--cm-colour-primary)      67%,
var(--cm-colour-primary-dark) 78%,
var(--pd-colour-primary)      89%,
var(--pd-colour-primary-dark) 100%); }

/* explicit one-off overrides when you need to break out of the surface, e.g. a muted label or a highlighted value within a surface */
.rr-text { color: var(--rr-teal-500); }
.rr-text-lighter { color: var(--rr-teal-400); }
.rr-text-light { color: var(--rr-teal-300); }
.rr-text-darker { color: var(--rr-colour-primary-dark); }
.rr-text-dark { color: var(--rr-colour-primary-darker); }
.rr-text-white { color: var(--rr-white); }
.rr-text-black { color: var(--rr-black); }
.rr-text-green { color: var(--rr-green-600); }

/* surface aware button that will react to bg colours */
.rr-btn {
    background-color: var(--rr-surface-btn-bg);
    color: var(--rr-surface-btn-text);
    border: none;
}
.rr-btn .glyphicon {
  top: 2px;   /* fix alignment */    
}

.rr-btn:hover {
    background-color: var(--rr-colour-primary-hover);
    color: var(--rr-white);
}

/* OTHER RT PRODUCTS - colours copied from https://www.roadtech.co.uk/combine.php?_r=/&type=css */
.tm-text { color: #C11532; }
.fl-text { color: #7E0066; } /* DOT Tracking */
.cm-text { color: #89BF00; }
.pd-text { color: #EF8300; }

.tm-bg-hover:hover { background-color: #fce8eb; }
.fl-bg-hover:hover { background-color: #f3e6f0; } /* DOT Tracking */
.cm-bg-hover:hover { background-color: #f0f9e0; }
.pd-bg-hover:hover { background-color: #fef3e2; }

.tm-border-hover:hover { border: 1px solid #C11532; }
.fl-border-hover:hover { border: 1px solid #7E0066; } /* DOT Tracking */
.cm-border-hover:hover { border: 1px solid #89BF00; }
.pd-border-hover:hover { border: 1px solid #EF8300; }