@media screen and  (min-width: 768px){
    :root, :host{
        --breakpoint: tablet;
    }
    
}
@media screen and  (min-width: 1024px){
    :root, :host{
        --breakpoint: desktop;
    }
}

:root,
:host {

    /* ------------ FONTS ----------- */
    --primary--font-family: var(--figtree--font-family);
    --primary--font-optical-sizing: var(--figtree--font-optical-sizing);
    --handwritten--font-family: var(--shadows-into-light-two--font-family);
    --handwritten--font-optical-sizing: var(--shadows-into-light-two--font-optical-sizing);


    /* ------------ COLORS ----------- */
    --color--dark-text: var(--black-800);
    --color--light-text: var(--white-800);

    --surface--color--primary--dark: var(--black-800);
    --surface--color--secondary--dark: var(--blue-600);
    --surface--color--primary--light: var(--white-800);


    /* ------------ SURFACES ----------*/


    --surface--dark--radial-gradient: radial-gradient(50% 50% at 50% 50%, var(--black-500) 0%, var(--black-600) 81%);
    --surface--dark--linear-gradient: linear-gradient(176deg, var(--blue-700) 2.52%, var(--blue-500) 96.81%);

    /* ------------ BREAKPOINTS ----------*/

 


}