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

:root {
    /* Branding Colors */
    --hutopy-primary: #6B0065;
    --hutopy-secondary: #A30E79;

    /* UI COLORS */
    --h-background: #201b20;
    --h-on-background: #e2e5e9;
    --h-surface: #252829;
    --h-on-surface: #e2e5e9;
    --h-primary: #1B1B1F;
    --h-on-primary: #e2e5e9;
    --h-secondary: #e7e5ea;
    --h-on-secondary: #000000;
    --h-tertiary: #272A44;
    --h-on-tertiary: #bdb6b6;
    --h-error: #bc2f2f;
    --h-on-error: #ffffff;
}

@layer components {
    .btn {
        @apply min-w-24 w-full;
        @apply p-4;
        @apply flex flex-nowrap gap-4 items-center justify-center ;
        @apply rounded-lg;
        @apply capitalize text-base font-sans font-medium;
        @apply w-fit px-10;
    }

    button.primary {
        @apply btn;
        @apply bg-hPrimary text-hOnPrimary;
        @apply hover:brightness-125;
    }

    button.secondary {
        @apply btn;
        @apply bg-hSecondary text-hOnSecondary;
        @apply hover:brightness-90;
    }

    div.card {
        @apply w-[1024px];
        @apply rounded-xl p-10 m-4;
        @apply bg-hSurface text-hOnSurface;
    }

    div.card-title {
        @apply font-sans font-bold text-2xl;
        @apply mb-8;
    }

    div.card-entry {
        @apply mb-4;
    }

    div.card-actions {
        @apply flex flex-row gap-6 justify-end;
    }
}