/* -----------------------------------------
   CUSTOM BCSA COLOR THEME
----------------------------------------- */

:root {
  /* color variations are hardcoded for older browsers
 color-mix is used for the newer browsers */

  /* Highlight */
  --color-p1: #FBAC19;
  --color-p1-dark: #C88713;
  --color-p1-darker: #92640E;
  --color-p1-darkest: #5A3C09;
  --color-p1-light: #FDC44F;
  --color-p1-lighter: #FDD98C;
  --color-p1-lightest: #FCEBC2;

  /* Primary */
  --color-p2: #096890;
  --color-p2-dark: #054A68;
  --color-p2-darker: #033245;
  --color-p2-darkest: #021D29;
  --color-p2-light: #3A89A8;
  --color-p2-lighter: #75AEC3;
  --color-p2-lightest: #B8D3DD;

  /* Standout */
  --color-p3: #153F62;
  --color-p3-dark: #10314B;
  --color-p3-darker: #0B2335;
  --color-p3-darkest: #06141E;
  --color-p3-light: #3E6A8C;
  --color-p3-lighter: #6F93AE;
  --color-p3-lightest: #A8C0D0;

  /* Secondary 1 */
  --color-s1: #F26522;
  --color-s1-darker: #B94A19;
  --color-s1-lighter: #F79A6A;

  /* Secondary 2 */
  --color-s2: #009388;
  --color-s2-dark: #006E69;
  --color-s2-darker: #004B47;

  /* Secondary 3 */
  --color-s3: #F78F1E;
  --color-s3-dark: #C26F17;
  --color-s3-light: #F9A94F;
  --color-s3-lighter: #FBCF99;

    /* Secondary 4 */
  --color-s4: #309C5F;
  --color-s4-dark: #247347;
  --color-s4-light: #55B886;
  --color-s4-lighter: #8CD7B2;

  /* Megamenu sub navigation background */
  --sub-nav-bg: var(--color-s1-lighter);

  /* Mobile navigation drawer background */
  --mobile-drawer: var(--color-p2);
  --mobile-drawer-active: var(--color-p2-light);
}

/* color-mix is used for the newer browsers */
@supports (color: color-mix) {
  :root {
    --color-p1-dark: color-mix(in srgb, var(--color-p1), #000 15%);
    --color-p1-darker: color-mix(in srgb, var(--color-p1), #000 30%);
    --color-p1-darkest: color-mix(in srgb, var(--color-p1), #000 60%);
    --color-p1-light: color-mix(in srgb, var(--color-p1), #fff 15%);
    --color-p1-lighter: color-mix(in srgb, var(--color-p1), #fff 30%);
    --color-p1-lightest: color-mix(in srgb, var(--color-p1), #fff 60%);
    --color-p2-dark: color-mix(in srgb, var(--color-p2), #000 15%);
    --color-p2-darker: color-mix(in srgb, var(--color-p2), #000 30%);
    --color-p2-darkest: color-mix(in srgb, var(--color-p2), #000 60%);
    --color-p2-light: color-mix(in srgb, var(--color-p2), #fff 15%);
    --color-p2-lighter: color-mix(in srgb, var(--color-p2), #fff 30%);
    --color-p2-lightest: color-mix(in srgb, var(--color-p2), #fff 60%);
    --color-p3-dark: color-mix(in srgb, var(--color-p3), #000 15%);
    --color-p3-darker: color-mix(in srgb, var(--color-p3), #000 30%);
    --color-p3-darkest: color-mix(in srgb, var(--color-p3), #000 60%);
    --color-p3-light: color-mix(in srgb, var(--color-p3), #fff 15%);
    --color-p3-lighter: color-mix(in srgb, var(--color-p3), #fff 30%);
    --color-p3-lightest: color-mix(in srgb, var(--color-p3), #fff 60%);
    --color-s1-darker: color-mix(in srgb, var(--color-s1), #000 5%);
    --color-s1-lighter: color-mix(in srgb, var(--color-s1), #fff 10%);
    --color-s2-dark: color-mix(in srgb, var(--color-s2), #000 15%);
    --color-s2-darker: color-mix(in srgb, var(--color-s2), #000 30%);
    --color-s3-dark: color-mix(in srgb, var(--color-s3), #000 15%);
    --color-s3-light: color-mix(in srgb, var(--color-s3), #fff 45%);
    --color-s3-lighter: color-mix(in srgb, var(--color-s3), #fff 60%);
    --color-s4-dark: color-mix(in srgb, var(--color-s4), #000 15%);
    --color-s4-light: color-mix(in srgb, var(--color-s4), #fff 45%);
    --color-s4-lighter: color-mix(in srgb, var(--color-s4), #fff 60%);
    --sub-nav-bg: var(--color-s1-lighter);
    --mobile-drawer: var(--color-p2);
    --mobile-drawer-active: var(--color-p2-light);
  }
}