/* =========================================================
   KPMG Canada — Colour classes
   ========================================================= */

/* =========================
   CSS Variables for colours
   ========================= */
:root {
  /* Primary core palette (On prem) */
  --ca-white:      #ffffff;   /* RGB 255, 255, 255 */
  --ca-dark-blue:  #0C233C;   /* RGB 12, 35, 60 */
  --ca-kpmg-blue:  #00338D;   /* RGB 0, 51, 141 */
  --ca-cobalt:     #1E49E2;   /* RGB 30, 73, 226 */
  --ca-pacific-blue: #00B8F5; /* RGB 0, 184, 245 */
  --ca-light-blue: #ACEAFF;   /* RGB 172, 234, 255 */
  --ca-purple:     #7213EA;   /* RGB 114, 19, 234 */
  --ca-pink:       #FD349C;   /* RGB 253, 52, 156 */

  /* Secondary infographic and chart palette */
  --ca-blue:         #76D2FF;   /* RGB 118, 210, 255 */
  --ca-dark-purple:  #510DBC;   /* RGB 81, 13, 188 */
  --ca-med-purple:   #985AED;   /* RGB 152, 90, 237 */
  --ca-light-purple: #B497FF;   /* RGB 180, 151, 255 */
  --ca-dark-pink:    #AB0D82;   /* RGB 171, 13, 130 */
  --ca-light-pink:   #FFA3DA;   /* RGB 255, 163, 218 */
  --ca-green:         #098E7E;   /* RGB 9, 142, 126 */
  --ca-light-green:  #00C0AE;   /* RGB 0, 192, 174 */
  --ca-mint-green:  #63EBDA;   /* RGB 99, 235, 218 */

  --ca-gray-1: #333333;   /* RGB 51, 51, 51 */
  --ca-gray-2: #666666;   /* RGB 102, 102, 102 */
  --ca-gray-3: #989898;   /* RGB 152, 152, 152 */
  --ca-gray-4: #B2B2B2;   /* RGB 178, 178, 178 */
  --ca-gray-5: #E5E5E5;   /* RGB 229, 229, 229 */

  /* New colours (2025 Cloud infogram) */
  --ca-aqua:      #009CD0;   /* RGB 0, 156, 208 */
  --ca-violet:    #9C5AF0;   /* RGB 156, 90, 240 */
  --ca-magenta:   #E42F8C;   /* RGB 228, 47, 140 */
  --ca-dark-green: #004D46;   /* RGB 0, 77, 70 */
  --ca-raspberry: #BC3D9B;   /* RGB 188, 61, 155 */

  /* Monochromatic blues (darkest → lightest) */
  --ca-blue-01: #0C1D5A;   /* RGB 12, 29, 90 */
  --ca-blue-02: #0F2471;   /* RGB 15, 36, 113 */
  --ca-blue-03: #122C88;   /* RGB 18, 44, 136 */
  --ca-blue-04: #15339E;   /* RGB 21, 51, 158 */
  --ca-blue-05: #183AB5;   /* RGB 24, 58, 181 */
  --ca-blue-06: #1B42CB;   /* RGB 27, 66, 203 */
  --ca-blue-07: var(--ca-cobalt);   /* RGB 30, 73, 226 */
  --ca-blue-08: #355CE5;   /* RGB 53, 92, 229 */
  --ca-blue-09: #4B6DE8;   /* RGB 75, 109, 232 */
  --ca-blue-10: #6280EB;   /* RGB 98, 128, 235 */
}

/* =========================
   Colour Classes (for text)
   ========================= */

.ca-white         { color: var(--ca-white); }
.ca-dark-blue     { color: var(--ca-dark-blue); }
.ca-kpmg-blue     { color: var(--ca-kpmg-blue); }
.ca-cobalt        { color: var(--ca-cobalt); }
.ca-pacific-blue  { color: var(--ca-pacific-blue); }
.ca-light-blue    { color: var(--ca-light-blue); }
.ca-purple        { color: var(--ca-purple); }
.ca-pink          { color: var(--ca-pink); }

.ca-blue          { color: var(--ca-blue); }
.ca-dark-purple   { color: var(--ca-dark-purple); }
.ca-med-purple    { color: var(--ca-med-purple); }
.ca-light-purple  { color: var(--ca-light-purple); }
.ca-dark-pink     { color: var(--ca-dark-pink); }
.ca-light-pink    { color: var(--ca-light-pink); }
.ca-green    { color: var(--ca-green); }
.ca-light-green   { color: var(--ca-light-green); }
.ca-mint-green   { color: var(--ca-mint-green); }

.ca-gray-1        { color: var(--ca-gray-1); }
.ca-gray-2        { color: var(--ca-gray-2); }
.ca-gray-3        { color: var(--ca-gray-3); }
.ca-gray-4        { color: var(--ca-gray-4); }
.ca-gray-5        { color: var(--ca-gray-5); }

.ca-aqua          { color: var(--ca-aqua); }
.ca-violet        { color: var(--ca-violet); }
.ca-magenta       { color: var(--ca-magenta); }
.ca-dark-green     { color: var(--ca-dark-green); }
.ca-raspberry     { color: var(--ca-raspberry); }

.ca-blue-01       { color: var(--ca-blue-01); }
.ca-blue-02       { color: var(--ca-blue-02); }
.ca-blue-03       { color: var(--ca-blue-03); }
.ca-blue-04       { color: var(--ca-blue-04); }
.ca-blue-05       { color: var(--ca-blue-05); }
.ca-blue-06       { color: var(--ca-blue-06); }
.ca-blue-07       { color: var(--ca-blue-07); }
.ca.ca-blue-08    { color: var(--ca-blue-08); }
.ca-blue-09       { color: var(--ca-blue-09); }
.ca-blue-10       { color: var(--ca-blue-10); }

/* =========================
   Background colours
   ========================= */

.ca-bgcolour-white         { background-color: var(--ca-white); }
.ca-bgcolour-dark-blue     { background-color: var(--ca-dark-blue); }
.ca-bgcolour-kpmg-blue     { background-color: var(--ca-kpmg-blue); }
.ca-bgcolour-cobalt        { background-color: var(--ca-cobalt); }
.ca-bgcolour-pacific-blue  { background-color: var(--ca-pacific-blue); }
.ca-bgcolour-light-blue    { background-color: var(--ca-light-blue); }
.ca-bgcolour-purple        { background-color: var(--ca-purple); }
.ca-bgcolour-pink          { background-color: var(--ca-pink); }

.ca-bgcolour-blue          { background-color: var(--ca-blue); }
.ca-bgcolour-dark-purple   { background-color: var(--ca-dark-purple); }
.ca-bgcolour-med-purple    { background-color: var(--ca-med-purple); }
.ca-bgcolour-light-purple  { background-color: var(--ca-light-purple); }
.ca-bgcolour-dark-pink     { background-color: var(--ca-dark-pink); }
.ca-bgcolour-light-pink    { background-color: var(--ca-light-pink); }
.ca-bgcolour-green    { background-color: var(--ca-green); }
.ca-bgcolour-light-green   { background-color: var(--ca-light-green); }
.ca-bgcolour-mint-green   { background-color: var(--ca-mint-green); }

.ca-bgcolour-gray-1        { background-color: var(--ca-gray-1); }
.ca-bgcolour-gray-2        { background-color: var(--ca-gray-2); }
.ca-bgcolour-gray-3        { background-color: var(--ca-gray-3); }
.ca-bgcolour-gray-4        { background-color: var(--ca-gray-4); }
.ca-bgcolour-gray-5        { background-color: var(--ca-gray-5); }

.ca-bgcolour-aqua          { background-color: var(--ca-aqua); }
.ca-bgcolour-violet        { background-color: var(--ca-violet); }
.ca-bgcolour-magenta       { background-color: var(--ca-magenta); }
.ca-bgcolour-dark-green     { background-color: var(--ca-dark-green); }
.ca-bgcolour-raspberry     { background-color: var(--ca-raspberry); }

.ca-bgcolour-blue-01       { background-color: var(--ca-blue-01); }
.ca-bgcolour-blue-02       { background-color: var(--ca-blue-02); }
.ca-bgcolour-blue-03       { background-color: var(--ca-blue-03); }
.ca-bgcolour-blue-04       { background-color: var(--ca-blue-04); }
.ca-bgcolour-blue-05       { background-color: var(--ca-blue-05); }
.ca-bgcolour-blue-06       { background-color: var(--ca-blue-06); }
.ca-bgcolour-blue-07       { background-color: var(--ca-blue-07); }
.ca-bgcolour-blue-08       { background-color: var(--ca-blue-08); }
.ca-bgcolour-blue-09       { background-color: var(--ca-blue-09); }
.ca-bgcolour-blue-10       { background-color: var(--ca-blue-10); }

/* =========================
   Stroke colours
   ========================= */
   
.ca-stroke-white         { stroke: var(--ca-white); }
.ca-stroke-dark-blue     { stroke: var(--ca-dark-blue); }
.ca-stroke-kpmg-blue     { stroke: var(--ca-kpmg-blue); }
.ca-stroke-cobalt        { stroke: var(--ca-cobalt); }
.ca-stroke-pacific-blue  { stroke: var(--ca-pacific-blue); }
.ca-stroke-light-blue    { stroke: var(--ca-light-blue); }
.ca-stroke-purple        { stroke: var(--ca-purple); }
.ca-stroke-pink          { stroke: var(--ca-pink); }

.ca-stroke-blue          { stroke: var(--ca-blue); }
.ca-stroke-dark-purple   { stroke: var(--ca-dark-purple); }
.ca-stroke-med-purple    { stroke: var(--ca-med-purple); }
.ca-stroke-light-purple  { stroke: var(--ca-light-purple); }
.ca-stroke-dark-pink     { stroke: var(--ca-dark-pink); }
.ca-stroke-light-pink    { stroke: var(--ca-light-pink); }
.ca-stroke-green    { stroke: var(--ca-green); }
.ca-stroke-light-green   { stroke: var(--ca-light-green); }
.ca-stroke-mint-green   { stroke: var(--ca-mint-green); }

.ca-stroke-gray-1        { stroke: var(--ca-gray-1); }
.ca-stroke-gray-2        { stroke: var(--ca-gray-2); }
.ca-stroke-gray-3        { stroke: var(--ca-gray-3); }
.ca-stroke-gray-4        { stroke: var(--ca-gray-4); }
.ca-stroke-gray-5        { stroke: var(--ca-gray-5); }

.ca-stroke-aqua          { stroke: var(--ca-aqua); }
.ca-stroke-violet        { stroke: var(--ca-violet); }
.ca-stroke-magenta       { stroke: var(--ca-magenta); }
.ca-stroke-dark-green     { stroke: var(--ca-dark-green); }
.ca-stroke-raspberry     { stroke: var(--ca-raspberry); }

.ca-stroke-blue-01       { stroke: var(--ca-blue-01); }
.ca-stroke-blue-02       { stroke: var(--ca-blue-02); }
.ca-stroke-blue-03       { stroke: var(--ca-blue-03); }
.ca-stroke-blue-04       { stroke: var(--ca-blue-04); }
.ca-stroke-blue-05       { stroke: var(--ca-blue-05); }
.ca-stroke-blue-06       { stroke: var(--ca-blue-06); }
.ca-stroke-blue-07       { stroke: var(--ca-blue-07); }
.ca-stroke-blue-08       { stroke: var(--ca-blue-08); }
.ca-stroke-blue-09       { stroke: var(--ca-blue-09); }
.ca-stroke-blue-10       { stroke: var(--ca-blue-10); }

/* =========================
   Fill colours
   ========================= */

.ca-fill-white         { fill: var(--ca-white); }
.ca-fill-dark-blue     { fill: var(--ca-dark-blue); }
.ca-fill-kpmg-blue     { fill: var(--ca-kpmg-blue); }
.ca-fill-cobalt        { fill: var(--ca-cobalt); }
.ca-fill-pacific-blue  { fill: var(--ca-pacific-blue); }
.ca-fill-light-blue    { fill: var(--ca-light-blue); }
.ca-fill-purple        { fill: var(--ca-purple); }
.ca-fill-pink          { fill: var(--ca-pink); }

.ca-fill-blue          { fill: var(--ca-blue); }
.ca-fill-dark-purple   { fill: var(--ca-dark-purple); }
.ca-fill-med-purple    { fill: var(--ca-med-purple); }
.ca-fill-light-purple  { fill: var(--ca-light-purple); }
.ca-fill-dark-pink     { fill: var(--ca-dark-pink); }
.ca-fill-light-pink    { fill: var(--ca-light-pink); }
.ca-fill-green    { fill: var(--ca-green); }
.ca-fill-light-green   { fill: var(--ca-light-green); }
.ca-fill-mint-green   { fill: var(--ca-mint-green); }

.ca-fill-gray-1        { fill: var(--ca-gray-1); }
.ca-fill-gray-2        { fill: var(--ca-gray-2); }
.ca-fill-gray-3        { fill: var(--ca-gray-3); }
.ca-fill-gray-4        { fill: var(--ca-gray-4); }
.ca-fill-gray-5        { fill: var(--ca-gray-5); }

.ca-fill-aqua          { fill: var(--ca-aqua); }
.ca-fill-violet        { fill: var(--ca-violet); }
.ca-fill-magenta       { fill: var(--ca-magenta); }
.ca-fill-dark-green     { fill: var(--ca-dark-green); }
.ca-fill-raspberry     { fill: var(--ca-raspberry); }

.ca-fill-blue-01       { fill: var(--ca-blue-01); }
.ca-fill-blue-02       { fill: var(--ca-blue-02); }
.ca-fill-blue-03       { fill: var(--ca-blue-03); }
.ca-fill-blue-04       { fill: var(--ca-blue-04); }
.ca-fill-blue-05       { fill: var(--ca-blue-05); }
.ca-fill-blue-06       { fill: var(--ca-blue-06); }
.ca-fill-blue-07       { fill: var(--ca-blue-07); }
.ca-fill-blue-08       { fill: var(--ca-blue-08); }
.ca-fill-blue-09       { fill: var(--ca-blue-09); }
.ca-fill-blue-10       { fill: var(--ca-blue-10); }