@charset "utf-8";

:root,
::before,
::after,
::backdrop {
    --liberty-yellow-h: 49;
    --liberty-yellow-s: 100%;
    --liberty-yellow-l: 50%;
    --liberty-yellow: hsl(var(--liberty-yellow-h) var(--liberty-yellow-s) var(--liberty-yellow-l));
    --liberty-yellow-80: hsl(var(--liberty-yellow-h) var(--liberty-yellow-s) calc(((100% - var(--liberty-yellow-l)) * 0.2) + var(--liberty-yellow-l)));
    --liberty-yellow-60: hsl(var(--liberty-yellow-h) var(--liberty-yellow-s) calc(((100% - var(--liberty-yellow-l)) * 0.4) + var(--liberty-yellow-l)));
    --liberty-yellow-40: hsl(var(--liberty-yellow-h) var(--liberty-yellow-s) calc(((100% - var(--liberty-yellow-l)) * 0.6) + var(--liberty-yellow-l)));
    --liberty-yellow-10: hsl(var(--liberty-yellow-h) var(--liberty-yellow-s) calc(((100% - var(--liberty-yellow-l)) * 0.9) + var(--liberty-yellow-l)));

    --liberty-dark-teal-h: 191;
    --liberty-dark-teal-s: 92%;
    --liberty-dark-teal-l: 29%;
    --liberty-dark-teal: hsl(var(--liberty-dark-teal-h) var(--liberty-dark-teal-s) var(--liberty-dark-teal-l));

    --liberty-medium-teal-h: 185;
    --liberty-medium-teal-s: 63%;
    --liberty-medium-teal-l: 42%;
    --liberty-medium-teal: hsl(var(--liberty-medium-teal-h) var(--liberty-medium-teal-s) var(--liberty-medium-teal-l));

    --liberty-light-teal-h: 185;
    --liberty-light-teal-s: 72%;
    --liberty-light-teal-l: 63%;
    --liberty-light-teal: hsl(var(--liberty-light-teal-h) var(--liberty-light-teal-s) var(--liberty-light-teal-l));

    --liberty-base-teal-h: 185;
    --liberty-base-teal-s: 63%;
    --liberty-base-teal-l: 55%;
    --liberty-base-teal: hsl(var(--liberty-base-teal-h) var(--liberty-base-teal-s) var(--liberty-base-teal-l));

    --liberty-teal-h: 180;
    --liberty-teal-s: 64%;
    --liberty-teal-l: 68%;
    --liberty-teal: hsl(var(--liberty-teal-h) var(--liberty-teal-s) var(--liberty-teal-l));
    --liberty-teal-80: hsl(var(--liberty-teal-h) var(--liberty-teal-s) calc(((100% - var(--liberty-teal-l)) * 0.2) + var(--liberty-teal-l)));
    --liberty-teal-60: hsl(var(--liberty-teal-h) var(--liberty-teal-s) calc(((100% - var(--liberty-teal-l)) * 0.4) + var(--liberty-teal-l)));
    --liberty-teal-40: hsl(var(--liberty-teal-h) var(--liberty-teal-s) calc(((100% - var(--liberty-teal-l)) * 0.6) + var(--liberty-teal-l)));
    --liberty-teal-10: hsl(var(--liberty-teal-h) var(--liberty-teal-s) calc(((100% - var(--liberty-teal-l)) * 0.9) + var(--liberty-teal-l)));

    --liberty-blue-h: 247;
    --liberty-blue-s: 56%;
    --liberty-blue-l: 18%;
    --liberty-blue: hsl(var(--liberty-blue-h) var(--liberty-blue-s) var(--liberty-blue-l));
    --liberty-blue-10: hsl(var(--liberty-blue-h) var(--liberty-blue-s) calc(((100% - var(--liberty-blue-l)) * 0.9) + var(--liberty-blue-l)));

    --liberty-blue-gray-h: 246;
    --liberty-blue-gray-s: 36%;
    --liberty-blue-gray-l: 23%;
    --liberty-blue-gray: hsl(var(--liberty-blue-gray-h) var(--liberty-blue-gray-s) var(--liberty-blue-gray-l)); /* Blue 90 */

    --liberty-dark-gray-h: 226;
    --liberty-dark-gray-s: 11%;
    --liberty-dark-gray-l: 23%;
    --liberty-dark-gray: hsl(var(--liberty-dark-gray-h) var(--liberty-dark-gray-s) var(--liberty-dark-gray-l));

    --liberty-gray-h: 0;
    --liberty-gray-s: 0%;
    --liberty-gray-l: 17%;
    --liberty-gray: hsl(var(--liberty-gray-h) var(--liberty-gray-s) var(--liberty-gray-l));
    --liberty-gray-90: hsl(var(--liberty-gray-h) var(--liberty-gray-s) calc(((100% - var(--liberty-gray-l)) * 0.1) + var(--liberty-gray-l)));
    --liberty-gray-81: hsl(var(--liberty-gray-h) var(--liberty-gray-s) calc(((100% - var(--liberty-gray-l)) * 0.19) + var(--liberty-gray-l)));
    --liberty-gray-78: hsl(var(--liberty-gray-h) var(--liberty-gray-s) calc(((100% - var(--liberty-gray-l)) * 0.22) + var(--liberty-gray-l)));
    --liberty-gray-73: hsl(var(--liberty-gray-h) var(--liberty-gray-s) calc(((100% - var(--liberty-gray-l)) * 0.27) + var(--liberty-gray-l)));
    --liberty-gray-69: hsl(var(--liberty-gray-h) var(--liberty-gray-s) calc(((100% - var(--liberty-gray-l)) * 0.31) + var(--liberty-gray-l)));
    --liberty-gray-44: hsl(var(--liberty-gray-h) var(--liberty-gray-s) calc(((100% - var(--liberty-gray-l)) * 0.56) + var(--liberty-gray-l)));
    --liberty-gray-29: hsl(var(--liberty-gray-h) var(--liberty-gray-s) calc(((100% - var(--liberty-gray-l)) * 0.71) + var(--liberty-gray-l)));
    --liberty-gray-25: hsl(var(--liberty-gray-h) var(--liberty-gray-s) calc(((100% - var(--liberty-gray-l)) * 0.75) + var(--liberty-gray-l)));
    --liberty-gray-10: hsl(var(--liberty-gray-h) var(--liberty-gray-s) calc(((100% - var(--liberty-gray-l)) * 0.9) + var(--liberty-gray-l)));
    --liberty-gray-04: hsl(var(--liberty-gray-h) var(--liberty-gray-s) calc(((100% - var(--liberty-gray-l)) * 0.96) + var(--liberty-gray-l)));

    /* dark mode grays */

    --liberty-atmospheric-h: 0;
    --liberty-atmospheric-s: 0%;
    --liberty-atmospheric-l: 0%;
    --liberty-atmospheric: hsl(var(--liberty-atmospheric-h) var(--liberty-atmospheric-s) var(--liberty-atmospheric-l));

    --liberty-darkest-gray-h: 227;
    --liberty-darkest-gray-s: 21%;
    --liberty-darkest-gray-l: 13%;
    --liberty-darkest-gray: hsl(var(--liberty-darkest-gray-h) var(--liberty-darkest-gray-s) var(--liberty-darkest-gray-l));

    --liberty-gray-6dm-h: 218;
    --liberty-gray-6dm-s: 16%;
    --liberty-gray-6dm-l: 23%;
    --liberty-gray-6dm: hsl(var(--liberty-gray-6dm-h) var(--liberty-gray-6dm-s) var(--liberty-gray-6dm-l));

    --liberty-gray-5dm-h: 216;
    --liberty-gray-5dm-s: 17%;
    --liberty-gray-5dm-l: 34%;
    --liberty-gray-5dm: hsl(var(--liberty-gray-5dm-h) var(--liberty-gray-5dm-s) var(--liberty-gray-5dm-l));

    --liberty-gray-4dm-h: 209;
    --liberty-gray-4dm-s: 28%;
    --liberty-gray-4dm-l: 56%;
    --liberty-gray-4dm: hsl(var(--liberty-gray-4dm-h) var(--liberty-gray-4dm-s) var(--liberty-gray-4dm-l));

    --liberty-gray-3dm-h: 210;
    --liberty-gray-3dm-s: 29%;
    --liberty-gray-3dm-l: 66%;
    --liberty-gray-3dm: hsl(var(--liberty-gray-3dm-h) var(--liberty-gray-3dm-s) var(--liberty-gray-3dm-l));

    --liberty-gray-2dm-h: 211;
    --liberty-gray-2dm-s: 26%;
    --liberty-gray-2dm-l: 77%;
    --liberty-gray-2dm: hsl(var(--liberty-gray-2dm-h) var(--liberty-gray-2dm-s) var(--liberty-gray-2dm-l));

    --liberty-gray-1dm-h: 187;
    --liberty-gray-1dm-s: 29%;
    --liberty-gray-1dm-l: 88%;
    --liberty-gray-1dm: hsl(var(--liberty-gray-1dm-h) var(--liberty-gray-1dm-s) var(--liberty-gray-1dm-l));

    /* semantic colors */

    --semantic-green-h: 150;
    --semantic-green-s: 100%;
    --semantic-green-l: 30%;
    --semantic-green: hsl(var(--semantic-green-h) var(--semantic-green-s) var(--semantic-green-l));
    --semantic-green-80: hsl(var(--semantic-green-h) var(--semantic-green-s) calc(((100% - var(--semantic-green-l)) * 0.2) + var(--semantic-green-l)));
    --semantic-green-10: hsl(var(--semantic-green-h) var(--semantic-green-s) calc(((100% - var(--semantic-green-l)) * 0.9) + var(--semantic-green-l)));

    --semantic-red-h: 0;
    --semantic-red-s: 65%;
    --semantic-red-l: 61%;
    --semantic-red: hsl(var(--semantic-red-h) var(--semantic-red-s) var(--semantic-red-l));
    --semantic-red-80: hsl(var(--semantic-red-h) var(--semantic-red-s) calc(((100% - var(--semantic-red-l)) * 0.2) + var(--semantic-red-l)));
    --semantic-red-10: hsl(var(--semantic-red-h) var(--semantic-red-s) calc(((100% - var(--semantic-red-l)) * 0.9) + var(--semantic-red-l)));

    --semantic-blue-h: 216;
    --semantic-blue-s: 100%;
    --semantic-blue-l: 58%;
    --semantic-blue: hsl(var(--semantic-blue-h) var(--semantic-blue-s) var(--semantic-blue-l));
    --semantic-blue-80: hsl(var(--semantic-blue-h) var(--semantic-blue-s) calc(((100% - var(--semantic-blue-l)) * 0.2) + var(--semantic-blue-l)));
    --semantic-blue-10: hsl(var(--semantic-blue-h) var(--semantic-blue-s) calc(((100% - var(--semantic-blue-l)) * 0.9) + var(--semantic-blue-l)));

    --semantic-orange-h: 30;
    --semantic-orange-s: 100%;
    --semantic-orange-l: 43%;
    --semantic-orange: hsl(var(--semantic-orange-h) var(--semantic-orange-s) var(--semantic-orange-l));
    --semantic-orange-80: hsl(var(--semantic-orange-h) var(--semantic-orange-s) calc(((100% - var(--semantic-orange-l)) * 0.2) + var(--semantic-orange-l)));
    --semantic-orange-10: hsl(var(--semantic-orange-h) var(--semantic-orange-s) calc(((100% - var(--semantic-orange-l)) * 0.9) + var(--semantic-orange-l)));

    /* dark mode semantic colors */

    --semantic-green-background-h: 150;
    --semantic-green-background-s: 100%;
    --semantic-green-background-l: 20%;
    --semantic-green-background: hsl(var(--semantic-green-background-h) var(--semantic-green-background-s) var(--semantic-green-background-l));

    --semantic-green-highlight-h: 150;
    --semantic-green-highlight-s: 85%;
    --semantic-green-highlight-l: 41%;
    --semantic-green-highlight: hsl(var(--semantic-green-highlight-h) var(--semantic-green-highlight-s) var(--semantic-green-highlight-l));

    --semantic-red-background-h: 0;
    --semantic-red-background-s: 65%;
    --semantic-red-background-l: 29%;
    --semantic-red-background: hsl(var(--semantic-red-background-h) var(--semantic-red-background-s) var(--semantic-red-background-l));

    --semantic-red-highlight-h: 0;
    --semantic-red-highlight-s: 85%;
    --semantic-red-highlight-l: 65%;
    --semantic-red-highlight: hsl(var(--semantic-red-highlight-h) var(--semantic-red-highlight-s) var(--semantic-red-highlight-l));

    --semantic-blue-background-h: 216;
    --semantic-blue-background-s: 89%;
    --semantic-blue-background-l: 35%;
    --semantic-blue-background: hsl(var(--semantic-blue-background-h) var(--semantic-blue-background-s) var(--semantic-blue-background-l));

    --semantic-blue-highlight-h: 216;
    --semantic-blue-highlight-s: 73%;
    --semantic-blue-highlight-l: 62%;
    --semantic-blue-highlight: hsl(var(--semantic-blue-highlight-h) var(--semantic-blue-highlight-s) var(--semantic-blue-highlight-l));

    --semantic-orange-background-h: 30;
    --semantic-orange-background-s: 86%;
    --semantic-orange-background-l: 28%;
    --semantic-orange-background: hsl(var(--semantic-orange-background-h) var(--semantic-orange-background-s) var(--semantic-orange-background-l));

    --semantic-orange-highlight-h: 30;
    --semantic-orange-highlight-s: 85%;
    --semantic-orange-highlight-l: 49%;
    --semantic-orange-highlight: hsl(var(--semantic-orange-highlight-h) var(--semantic-orange-highlight-s) var(--semantic-blue-highlight-l));
}