@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base{
    :root {
        --color-bg: 245, 245, 245;
        --color-text: 51, 51, 51;
        --color-text-muted: 42, 45, 50;
        --color-text-muted2: 139, 139, 139;
        --color-accent: 229, 231, 235;
        --color-primary: 77, 80, 186;
    }
    
    @media (prefers-color-scheme: dark) {
        :root {
            --color-bg: 30, 30, 30;
            --color-text: 245, 245, 245;
            --color-text-muted: 200, 200, 200;
            --color-text-muted2: 139, 139, 139;
            --color-accent: 70, 73, 78;
            --color-primary: 77, 80, 186;
        }
    }
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

.button-class {
    @apply  
        relative flex items-center gap-0 hover:gap-1 w-fit bg-accent border border-text-muted2/50 text-text font-transducer px-6 pr-4 py-3 rounded-md font-medium text-sm transition-all duration-300
				before:content-[''] before:absolute before:-z-10 before:inset-0 before:translate-x-0 before:translate-y-0 before:bg-primary before:border before:border-text-muted2 before:rounded-md before:transition-all before:duration-300
				after:content-[''] after:absolute after:-z-20 after:inset-0 after:translate-x-0 after:translate-y-0 after:bg-text after:border after:border-text-muted2 after:rounded-md after:transition-all after:duration-300
				hover:before:translate-x-2 hover:before:translate-y-2
				hover:after:translate-x-4 hover:after:translate-y-4
}