:root {
    /* --- COLOUR PALETTE --- */
    /* Purples */
    --purple-darkest: #361559;
    --purple-darker: #6D35A6;
    --purple-dark: #9774B8;
    --purple-standard: #C7A6E8;
    --purple-light: #D5C0EB;
    --purple-lighter: #F5DFFF;
    --purple-lightest: #FBF2FF;

    /* Secondary & Neutrals */
    --blue: #ABBCFF;
    --blue-light: #DBE2FF;
    --orange: #FFC880;
    --orange-light: #FFEED9;
    --black: #000000;
    --white: #ffffff;
    --grey: #8e8e8e;

    /* Text */
    --text-primary: var(--black);
    --text-secondary: var(--white);
    --text-dark-purple: var(--purple-darker);
    --text-light-purple: var(--purple-lighter);

    /* Backgrounds */
    --bg-primary: var(--white);
    --bg-secondary: var(--purple-darkest);
    --bg-inverse: var(--grey);
    --bg-lavender: var(--purple-lighter);
    --bg-light-blue: var(--blue-light);
    --bg-light-orange: var(--orange-light);

    /* --- TYPOGRAPHY --- */
    --h1-size: 74px;
    --h2-size: 42px;
    --h3-size: 34px;
    --h4-size: 26px;
    --h5-size: 24px;
    --p-size: 18px;

    --lh-tight: 1.1;
    --lh-medium: 1.2;
    --lh-relaxed: 1.4;

    --font-heading: 'Architects Daughter';
}

/* --- GLOBAL TAG STYLES --- */
body, p {
    color: var(--text-primary);
    font-family: 'Inter', sans-serif;
    font-size: var(--p-size);
    line-height: var(--lh-relaxed);
    margin: 0;
}

h1 { font-family: var(--font-heading); font-weight: 400; font-size: var(--h1-size); line-height: var(--lh-tight); color: var(--text-secondary); margin: 0; }
h2 { font-family: var(--font-heading); font-weight: 400; font-size: var(--h2-size); line-height: var(--lh-tight); color: var(--text-primary); margin: 0; }
h3 { font-family: var(--font-heading); font-weight: 400; font-size: var(--h3-size); line-height: var(--lh-tight); color: var(--text-dark-purple); margin: 0; }
h4 { font-family: var(--font-heading); font-weight: 400; font-size: var(--h4-size); line-height: var(--lh-medium); color: var(--text-primary); margin: 0; }
h5 { font-family: var(--font-heading); font-weight: 400; font-size: var(--h5-size); line-height: var(--lh-relaxed); color: var(--text-primary); margin: 0; }

/*smooth scrolling*/
html {
    scroll-behavior: smooth;
}

@media (max-width: 768px) {
    h1 { font-size: 36px }
    h2 { font-size: 24px }
    h3 { font-size: 18px }
    h4 { font-size: 14px }
    body, p { font-size: 14px }
}