:root {
    --color-p1: #fdb81e;
    --color-p1-dark: #fdb20a;
    --color-p1-darker: #f5aa02;
    --color-p1-darkest: #d29102;
    --color-p1-light: #fdc64b;
    --color-p1-lighter: #fed478;
    --color-p1-lightest: #fee3a5;
    --color-p2: #046b99;
    --color-p2-dark: #035d85;
    --color-p2-darker: #035376;
    --color-p2-darkest: #023a53;
    --color-p2-light: #3689ad;
    --color-p2-lighter: #68a6c2;
    --color-p2-lightest: #9bc4d6;
    --color-p3: #323a45;
    --color-p3-dark: #293039;
    --color-p3-darker: #232930;
    --color-p3-darkest: #14171c;
    --color-p3-light: #5b616a;
    --color-p3-lighter: #84898f;
    --color-p3-lightest: #adb0b5;
    --color-s1: #eef8fb;
    --color-s1-darker: #e2f3f8;
    --color-s1-lighter: #f7fcfd;
    --color-s2: #87b8ce;
    --color-s2-dark: #6ea9c4;
    --color-s2-darker: #549ab9;
    --color-s3: #4993b5;
    --color-s3-dark: #3f7e9c;
    --color-s3-light: #92bed3;
    --color-s3-lighter: #b6d4e1;
    --sub-nav-bg: var(--color-s1-lighter);
    --mobile-drawer: var(--color-p2-darker);
    --mobile-drawer-active: var(--color-p2);
}

@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);
    }
}