:root {
    /* Sizes */
    --siz-min: .9375rem;
    --siz-0: 14px;
    --siz-1: 17px;
    --siz-2: 20px;
    --siz-3: 2rem;
    --siz-4: 3rem;
    --siz-5: 4rem;
    --siz-6: 52px;
    --siz-7: 64px;

    --lmt: 1080px;

    /* Dimensions */
    --btn-hgt: 44px;
    --mst-hgt: calc(42px + 2rem);

    /* Radii */
    --rad-1: 6px;
    --rad-2: 8px;
    --rad-3: 10px;
    --rad-4: 20px;

    /* Borders and outlines */
    --str: 2px;

    /* Fonts */
    --fnt-std: 'Inter', -apple-system, Arial, sans-serif;
    --fnt-btn: 'Inter', -apple-system, Arial, sans-serif;
    --fnt-hdg: 'Charter', -apple-system, Arial, sans-serif;

    /* Colours */
    --wht-0: #fff;
    --wht-1: hsl(30, 35%, 95%);
    --wht-2: hsl(30, 20%, 75%);
    --wht-3: hsl(30, 5%, 60%);
    --wht-4: hsla(30, 35%, 65%, .075);

    --blk-0: hsl(230, 15%, 31.5%);
    --blk-1: hsl(230, 15%, 25%);
    --blk-2: hsl(230, 15%, 21%);
    --blk-3: hsl(230, 15%, 17%);

    --red-0: hsl(355, 95%, 80%);
    --red-1: hsl(355, 95%, 65%);
    --red-2: hsl(355, 95%, 57.5%);
    --red-3: hsl(355, 95%, 55%);

    --grn-0: hsl(157, 96%, 35%);
    --grn-1: hsl(157, 96%, 26%);
    --grn-2: hsl(157, 96%, 21%);
    --grn-3: hsl(157, 96%, 15%);

    --lim-0: hsl(157, 96%, 35%);
    --lim-1: hsl(157, 96%, 30%);
    --lim-2: hsl(157, 96%, 24%);
    --lim-3: hsl(157, 96%, 21%);

    --blu-0: hsl(210, 80%, 65%);
    --blu-1: hsl(210, 80%, 55%);
    --blu-2: hsl(210, 80%, 40%);
    --blu-3: hsl(210, 80%, 32.5%);

    --pur-0: hsl(255, 80%, 80%);
    --pur-1: hsl(255, 80%, 70%);
    --pur-2: hsl(255, 80%, 65%);
    --pur-3: hsl(255, 80%, 55%);

    --ylw-0: hsl(35, 80%, 85%);
    --ylw-1: hsl(35, 80%, 70%);
    --ylw-2: hsl(35, 80%, 55%);
    --ylw-3: hsl(35, 80%, 45%);

    --cya-0: hsl(190, 60%, 60%);
    --cya-1: hsl(190, 60%, 55%);
    --cya-2: hsl(190, 60%, 50%);
    --cya-3: hsl(190, 60%, 45%);

    --org-0: hsl(370, 90%, 80%);
    --org-1: hsl(380, 90%, 65%);
    --org-2: hsl(380, 90%, 52.5%);
    --org-3: hsl(380, 90%, 45%);

    --mag-0: hsl(330, 60%, 65%);
    --mag-1: hsl(330, 60%, 55%);
    --mag-2: hsl(330, 60%, 45%);
    --mag-3: hsl(330, 60%, 35%);

    --lim-1: hsl(90, 50%, 55%);

    /* Box shadows */
    --shd-1: 0 12px 24px hsla(0, 0%, 0%, .125);
    --shd-2: 0 12px 24px hsla(0, 0%, 0%, .125);

    /* Effects */
    --trn: all .025s ease-in-out;
    --log: cubic-bezier(0, .85, .9, .95);
}
