/* THEMES */
    /* Color */
html[data-theme="light"] {	
	--c-fg-1: var(--black);
	--c-fg-2: var(--grey-1);
	--c-fg-3: var(--grey-2);
	--c-fg-4: var(--grey-3);
	--c-fg-5: var(--grey-4);
	--c-fg-6: var(--white);
	--c-bg-1: var(--white);
	--c-bg-2: var(--grey-4);
	--c-bg-3: var(--grey-3);
	--c-bg-4: var(--grey-2);
	--c-bg-5: var(--grey-1);
	--c-bg-6: var(--black);
}
html[data-theme="dark"] {
    --c-fg-1: var(--white);
    --c-fg-2: var(--grey-4);
    --c-fg-3: var(--grey-3);
    --c-fg-4: var(--grey-2);
    --c-fg-5: var(--grey-1);
    --c-fg-6: var(--black);
    --c-bg-1: var(--black);
    --c-bg-2: var(--grey-1);
    --c-bg-3: var(--grey-2);
    --c-bg-4: var(--grey-3);
    --c-bg-5: var(--grey-4);
    --c-bg-6: var(--white);
}
/* GLOBAL VARIABLES */
html {
    /* Color */
	--black: #000000;
	--white: #FFFFFF;
	--grey-1: #3A3C3D;
	--grey-2: #737C88;
	--grey-3: #A7ACB2;
	--grey-4: #FAFAFA;
    /* Font family */
	--ff-primary: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
    /* Font weight */
	--fw-light: 300;
	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;
    /* Font size */
	/* Perfect fourths 1.333 */
	--fs-xs: 0.563rem;
	--fs-sm: 0.75rem;
	--fs-md: 1rem;
	--fs-lg: 1.333rem;
	--fs-xl: 1.777rem;
	--fs-2xl: 2.369rem;
	--fs-3xl: 3.157rem;
	--fs-4xl: 4.209rem;
    /* Line height */
    /* Perfect fourths 1.333 */	
	--lh-xs: 0.75rem;
    --lh-sm: 1rem;
	--lh-md: 1.333rem;
	--lh-lg: 1.777rem;
	--lh-xl: 2.369rem;
    /* Spacers */
    /* Perfect fourths 1.333 */
    --sp-3xs: 0.238rem;
    --sp-2xs: 0.422rem;
    --sp-xs: 0.563rem;
	--sp-sm: 0.75rem;
	--sp-md: 1rem;
	--sp-lg: 1.333rem;
	--sp-xl: 1.777rem;
	--sp-2xl: 2.369rem;
	--sp-3xl: 3.157rem;
	--sp-4xl: 4.209rem;
    --sp-5xl: 5.61rem;
	--sp-6xl: 7.478rem;
	--sp-7xl: 9.969rem;
	--sp-8xl: 13.288rem;
	--sp-9xl: 17.713rem;
	--sp-10xl: 23.612rem;
}

/* UTILITIES */
.flow > * + * {
    margin-top: var(--flow-space, 1em);
}
.c-fg-1 {
    color: var(--c-fg-1);
}
.c-fg-2 {
    color: var(--c-fg-2);
} 
.c-fg-3 {
    color: var(--c-fg-3);
} 
.c-fg-4 {
    color: var(--c-fg-4);
} 
.c-fg-5 {
    color: var(--c-fg-5);
}
.c-fg-6 {
    color: var(--c-fg-6);
}
.c-bg-1 {
    background-color: var(--c-bg-1);
}
.c-bg-2 {
    background-color: var(--c-bg-2);
} 
.c-bg-3 {
    background-color: var(--c-bg-3);
} 
.c-bg-4 {
    background-color: var(--c-bg-4);
} 
.c-bg-5 {
    background-color: var(--c-bg-5);
}
.c-bg-6 {
    background-color: var(--c-bg-6);
}         
.ff-primary {
	font-family: var(--ff-primary);	
}
.fs-xs {
	font-size: var(--fs-xs);	
}
.fs-sm {
	font-size: var(--fs-sm);	
}
.fs-md {
	font-size: var(--fs-md);	
}
.fs-lg {
	font-size: var(--fs-lg);	
}
.fs-xl {
	font-size: var(--fs-xl);	
}
.fs-2xl {
	font-size: var(--fs-2xl);	
}
.fs-3xl {
	font-size: var(--fs-3xl);	
}
.fs-4xl {
	font-size: var(--fs-4xl);	
}
.lh-2xs {
    line-height: var(--lh-2xs);
}
.lh-xs {
    line-height: var(--lh-xs);
}
.lh-sm {
    line-height: var(--lh-sm);
}
.lh-md {
    line-height: var(--lh-md);
}
.lh-lg {
    line-height: var(--lh-lg);
}
.lh-xl {
    line-height: var(--lh-xl);
}
.fw-light {
    font-weight: var(--fw-light);
}
.fw-regular {
    font-weight: var(--fw-regular);
}
.fw-medium {
    font-weight: var(--fw-medium);
}
.fw-semibold {
    font-weight: var(--fw-semibold);
}
.fw-bold {
    font-weight: var(--fw-bold);
}