@import "tailwindcss";
@import "@nuxt/ui";

:root {
    /*--font-sans: "Space Grotesk", sans-serif;*/
    --font-sans : "Geist";

    /* Main UI color, for now*/
    --ui-primary: var(--color-blue-600);
    --ui-bg-accented: oklch(54.6% 0.245 262.881 / 20%);
    --ui-bg-elevated: oklch(54.6% 0.245 262.881 / 40%);
}

.geist {
    font-family: "Geist";
}
.geist-mono {
    font-family: "Geist Mono";
}


.light {
    --ui-bg: var(--color-neutral-200);
    
}

.light .pop {
    --ui-bg: var(--color-zinc-50);
}

.dark {
    --ui-bg: var(--color-black);
}

/* aqui é descendência -- aplica a todos os subelementos de .dark que tenha .pop */
.dark .pop {
    --ui-bg: var(--color-zinc-900);
}



.inter {
    font-family: "Inter";
}