:root{

    /*-- Base colours system --*/

    /*hex-colours*/
    --h-eggshell: #F5F1E8;
    --h-white: #fff;
    --h-black: #2A2E3A;
    --h-green: #6E8B78;
    --h-sand: #F0C788;
    --h-m-brown: #EAE4DA;

    --h-offgrey:#EFF2FD;

    /*Core black tints*/
    --c-black-0:   hsl(225, 16%, 94%);
    --c-black-10:  hsl(225, 16%, 88%);
    --c-black-20:  hsl(225, 16%, 76%);
    --c-black-30:  hsl(225, 16%, 64%);
    --c-black-40:  hsl(225, 16%, 48%);
    --c-black-50:  hsl(225, 16%, 20%); /* #2A2E3A */
    --c-black-60:  hsl(225, 16%, 16%);
    --c-black-70:  hsl(225, 16%, 12%);
    --c-black-80:  hsl(225, 16%, 8%);
    --c-black-90:  hsl(225, 16%, 5%);
    --c-black-100: hsl(225, 16%, 2%);

    /*Core green tints*/
    --c-green-0:  hsl(150, 11%, 95%);
    --c-green-10: hsl(150, 11%, 85%);
    --c-green-20: hsl(150, 11%, 75%);
    --c-green-30: hsl(150, 11%, 65%);
    --c-green-40: hsl(150, 11%, 55%);
    --c-green-50: hsl(150, 11%, 49%); /* #6E8B78 */
    --c-green-60: hsl(150, 11%, 40%);
    --c-green-70: hsl(150, 11%, 30%);
    --c-green-80: hsl(150, 11%, 20%);
    --c-green-90: hsl(150, 11%, 12%);
    --c-green-100: hsl(150, 11%, 6%);

    /*Core sand tints*/
    --c-sand-0:   hsl(36, 78%, 98%);
    --c-sand-10:  hsl(36, 78%, 92%);
    --c-sand-20:  hsl(36, 78%, 86%);
    --c-sand-30:  hsl(36, 78%, 80%);
    --c-sand-40:  hsl(36, 78%, 77%);
    --c-sand-50:  hsl(36, 78%, 74%); /* #F0C788 */
    --c-sand-60:  hsl(36, 78%, 65%);
    --c-sand-70:  hsl(36, 78%, 55%);
    --c-sand-80:  hsl(36, 78%, 45%);
    --c-sand-90:  hsl(36, 78%, 35%);
    --c-sand-100: hsl(36, 78%, 20%);

    /*Core coral tints*/
    --c-coral-0:   hsl(13, 59%, 96%);
    --c-coral-10:  hsl(13, 59%, 88%);
    --c-coral-20:  hsl(13, 59%, 80%);
    --c-coral-30:  hsl(13, 59%, 72%);
    --c-coral-40:  hsl(13, 59%, 64%);
    --c-coral-50:  hsl(13, 59%, 56%); /* #D06A4E */
    --c-coral-60:  hsl(13, 59%, 48%);
    --c-coral-70:  hsl(13, 59%, 38%);
    --c-coral-80:  hsl(13, 59%, 28%);
    --c-coral-90:  hsl(13, 59%, 18%);
    --c-coral-100: hsl(13, 59%, 10%);

    /*-- Colour usage --*/
    --surface-1: var(--h-white);
    --surface-1-border: var(--h-l-brown);

    --border-brown: var(--h-l-brown);
    --border-l-grey: var(--c-black-0);
    --border-white: var(--h-white);

    --divider-brown: var(--h-l-brown);
    --divider-l-grey: var(--c-black-0);
    --divider-white: var(--h-white);

    --bg-egg: var(--h-eggshell);

    --bg-green: var(--c-green-50);
    --bg-l-green-10: var(--c-green-10);
    --bg-l-green-20: var(--c-green-20);

    --bg-sand: var(--c-sand-50);
    --bg-l-sand-10: var(--c-sand-10);
    --bg-l-sand-20: var(--c-sand-20);


    --c-focus: var(--c-coral-50);
    --c-foucs-green: var(--c-green-50);
    --c-focus-sand: var(--c-sand-50);
    --c-neutral: var(--c-black-0);

    --text: var(--c-black-50);
    --text-white: var(--h-white);
    --text-green: var(--c-green-50);
    --text-sand: var(--c-sand-50);

    --drop-shadow: 0 10px 10px 0 rgba(0, 0, 0, .10);
       
}