:root{
    /* Mobile default */
    --section-spacing: 2rem;        /* 32px */
    --section-spacing-xl: 3rem;     /* 48px */
    --section-spacing-3xl: 4rem;    /* 64px */
    --section-spacing-4xl: 5rem;
    --section-spacing-5xl: 6rem;

    --page-spacing: 1rem;           /* 16px */
    --page-spacing-xl: 1.5rem;      /* 24px */
    --page-spacing-2xl: 2rem;       /* 32px */
    --page-spacing-3xl: 3rem;

    --word-spacing: 1rem;           /* 16px */
    --word-spacing-lg: 1.5rem;      /* 24px */
    --word-spacing-xl: 2rem;        /* 32px */
    --word-spacing-2xl: 3rem;       /* 48px */

    --gap-spacing: 1.5rem;
    --gap-spacing-lg: 2rem;
    --gap-spacing-xl: 2.5rem;         /* 32px */

    --button-padding-y: 1rem;
    --button-padding-x: 2rem;
    --button-spacing: 3rem;

    --hedera-space: 2rem;           /* 32px */
    --hedera-space-lg: 2.25rem;
    --hedera-space-xl: 2.5rem;      /* 40px */
    --hedera-space-2xl: 3rem;       /* 48px */
    --hedera-space-3xl: 4rem;       /* 64px */
}

/* Tablet and above */
@media (min-width: 48em) {
    :root {
        --section-spacing: 3rem;        /* 48px */
        --section-spacing-xl: 4rem;     /* 64px */
        --section-spacing-3xl: 6rem;    /* 96px */
        --section-spacing-4xl: 7rem;
        --section-spacing-5xl: 8rem;

        --page-spacing: 2rem;           /* 32px */
        --page-spacing-xl: 3rem;        /* 48px */
        --page-spacing-2xl: 4rem;       /* 64px */
        --page-spacing-3xl: 5rem;

        --word-spacing: 1.5rem;         /* 24px */
        --word-spacing-lg: 2.5rem;      /* 40px */
        --word-spacing-xl: 4rem;        /* 64px */
        --word-spacing-2xl: 5rem;       /* 80px */

        --gap-spacing: 3rem;
        --gap-spacing-lg: 3.5rem;
        --gap-spacing-xl: 4rem;         /* 64px */

        --hedera-space: 3rem;           /* 48px */
        --hedera-space-lg: 3.5rem;
        --hedera-space-xl: 4rem;        /* 64px */
        --hedera-space-2xl: 5rem;       /* 80px */
        --hedera-space-3xl: 6rem;       /* 96px */
    }
}

/* Desktop and above */
@media (min-width: 64em){
    :root {
        --section-spacing: 4rem; /* 64px */
        --section-spacing-xl: 6rem; /* 96px */
        --section-spacing-3xl: 10rem; /* 160px */
        --section-spacing-4xl: 12rem;
        --section-spacing-5xl: 14rem;

        --page-spacing: 4rem;
        --page-spacing-xl: 6rem;
        --page-spacing-2xl: 8rem;
        --page-spacing-3xl: 10rem;

        --word-spacing: 2rem;
        --word-spacing-lg: 4rem;
        --word-spacing-xl: 6rem;
        --word-spacing-2xl: 8rem;

        --gap-spacing: 4rem;
        --gap-spacing-lg: 5rem;
        --gap-spacing-xl: 6rem;

        --hedera-space: 4rem;
        --hedera-space-lg: 5rem;
        --hedera-space-xl: 6.25rem; /* 100px */
        --hedera-space-2xl: 8rem; /* 128px */
        --hedera-space-3xl: 10rem; /* 160px */
    }
}