/* -----------------------------------------
  LCI WEB COLOR THEME
----------------------------------------- */

:root {
  --color-p1: #d24148;
  --color-p1-dark: #b2373d;
  --color-p1-darker: #932e32;
  --color-p1-darkest: #541a1d;
  --color-p1-light: #d95e63;
  --color-p1-lighter: #e07a7f;
  --color-p1-lightest: #edb3b6;

  --color-p2: #446e95;
  --color-p2-dark: #3a5e7f;
  --color-p2-darker: #304d68;
  --color-p2-darkest: #1b2c3c;
  --color-p2-light: #6084a5;
  --color-p2-lighter: #7c9ab5;
  --color-p2-lightest: #b4c5d5;

  --color-p3: #171f21;
  --color-p3-dark: #141a1b;
  --color-p3-darker: #111516;
  --color-p3-darkest: #0a0c0c;
  --color-p3-light: #354447;
  --color-p3-lighter: #54676c;
  --color-p3-lightest: #9ea8ab;

  --color-s1: #f2f2f2;
  --color-s1-darker: #a9a9a9;
  --color-s1-lighter: #f6f6f6;

  --color-s2: #dedee0;
  --color-s2-dark: #bcbcbf;
  --color-s2-darker: #9a9a9e;

  --color-s3: #999999;
  --color-s3-dark: #828282;
  --color-s3-light: #a8a8a8;
  --color-s3-lighter: #b8b8b8;
  --sub-nav-bg: var(--color-s1-lighter);
  --mobile-drawer: var(--color-p2-darker);
  --mobile-drawer-active: var(--color-p2);

  --color-p4: #bd833c;
  --color-p4-dark: #a16f33;
  --color-p4-darker: #845c2a;
  --color-p4-darkest: #4c3418;
  --color-p4-light: #c79659;
  --color-p4-lighter: #d1a876;
  --color-p4-lightest: #e5cdb1;

  --color-p5: #d56a4a;
  --color-p5-dark: #b55a3f;
  --color-p5-darker: #954a34;
  --color-p5-darkest: #552a1e;
  --color-p5-light: #db8065;
  --color-p5-lighter: #e29780;
  --color-p5-lightest: #eec3b7;

  --color-p6: #74a893;
  --color-p6-dark: #638f7d;
  --color-p6-darker: #517667;
  --color-p6-darkest: #2e433b;
  --color-p6-light: #89b5a3;
  --color-p6-lighter: #9ec2b3;
  --color-p6-lightest: #c7dcd4;

  --color-p7: #8f5690;
  --color-p7-dark: #7a497a;
  --color-p7-darker: #643c65;
  --color-p7-darkest: #39223a;
  --color-p7-light: #a06fa1;
  --color-p7-lighter: #b189b1;
  --color-p7-lightest: #d2bbd3;

  --color-p8: #2b8282;
  --color-p8-dark: #256e6e;
  --color-p8-darker: #1e5b5b;
  --color-p8-darkest: #113434;
  --color-p8-light: #4b9595;
  --color-p8-lighter: #6ba8a8;
  --color-p8-lightest: #aacdcd;

  --color-p9: #a7497e;
  --color-p9-dark: #8e3e6b;
  --color-p9-darker: #753358;
  --color-p9-darkest: #431d32;
  --color-p9-light: #b46491;
  --color-p9-lighter: #c180a5;
  --color-p9-lightest: #dcb6cb;

}
@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%);
      
      --sub-nav-bg: var(--color-s1-lighter);
      --mobile-drawer: var(--color-p2-darker);
      --mobile-drawer-active: var(--color-p2);

      --color-p4-dark: color-mix(in srgb, var(--color-p4), #000 15%);
      --color-p4-darker: color-mix(in srgb, var(--color-p4), #000 30%);
      --color-p4-darkest: color-mix(in srgb, var(--color-p4), #000 60%);
      --color-p4-light: color-mix(in srgb, var(--color-p4), #fff 15%);
      --color-p4-lighter: color-mix(in srgb, var(--color-p4), #fff 30%);
      --color-p4-lightest: color-mix(in srgb, var(--color-p4), #fff 60%);

      --color-p5-dark: color-mix(in srgb, var(--color-p5), #000 15%);
      --color-p5-darker: color-mix(in srgb, var(--color-p5), #000 30%);
      --color-p5-darkest: color-mix(in srgb, var(--color-p5), #000 60%);
      --color-p5-light: color-mix(in srgb, var(--color-p5), #fff 15%);
      --color-p5-lighter: color-mix(in srgb, var(--color-p5), #fff 30%);
      --color-p5-lightest: color-mix(in srgb, var(--color-p5), #fff 60%);

      --color-p6-dark: color-mix(in srgb, var(--color-p6), #000 15%);
      --color-p6-darker: color-mix(in srgb, var(--color-p6), #000 30%);
      --color-p6-darkest: color-mix(in srgb, var(--color-p6), #000 60%);
      --color-p6-light: color-mix(in srgb, var(--color-p6), #fff 15%);
      --color-p6-lighter: color-mix(in srgb, var(--color-p6), #fff 30%);
      --color-p6-lightest: color-mix(in srgb, var(--color-p6), #fff 60%);

      --color-p7-dark: color-mix(in srgb, var(--color-p7), #000 15%);
      --color-p7-darker: color-mix(in srgb, var(--color-p7), #000 30%);
      --color-p7-darkest: color-mix(in srgb, var(--color-p7), #000 60%);
      --color-p7-light: color-mix(in srgb, var(--color-p7), #fff 15%);
      --color-p7-lighter: color-mix(in srgb, var(--color-p7), #fff 30%);
      --color-p7-lightest: color-mix(in srgb, var(--color-p7), #fff 60%);

      --color-p8-dark: color-mix(in srgb, var(--color-p8), #000 15%);
      --color-p8-darker: color-mix(in srgb, var(--color-p8), #000 30%);
      --color-p8-darkest: color-mix(in srgb, var(--color-p8), #000 60%);
      --color-p8-light: color-mix(in srgb, var(--color-p8), #fff 15%);
      --color-p8-lighter: color-mix(in srgb, var(--color-p8), #fff 30%);
      --color-p8-lightest: color-mix(in srgb, var(--color-p8), #fff 60%);

      --color-p9-dark: color-mix(in srgb, var(--color-p9), #000 15%);
      --color-p9-darker: color-mix(in srgb, var(--color-p9), #000 30%);
      --color-p9-darkest: color-mix(in srgb, var(--color-p9), #000 60%);
      --color-p9-light: color-mix(in srgb, var(--color-p9), #fff 15%);
      --color-p9-lighter: color-mix(in srgb, var(--color-p9), #fff 30%);
      --color-p9-lightest: color-mix(in srgb, var(--color-p9), #fff 60%);


  }
}