@import 'tailwindcss';

@theme {
    --color-primary: #6d32dc;
    --color-secondary: rgb(21, 112, 239);
    --color-primary-dark: color-mix(in srgb, var(--color-primary) 80%, black);
    --color-primary-light: hsl(from var(--color-primary) h s 97%);
    --color-accent: #ffc700;
    --color-accent-light: #FFED86;
    --color-background-light: #f8f9fb;
    --color-dark: #1b2124;
    --color-light: #898989;
    --color-success: #1bda61;
    --color-error: #ef4444;
    --text-15: 15px;
}

a {
    outline: none;
}

.container {
    max-width: 1350px;
    width: 100%;
    margin: 0 auto;
}

/* Common base button styles */
.btn-primary,
.btn-dark,
.btn-outline-light,
.btn-outline-primary {
    @apply px-[24px] py-[9px] rounded-md shadow-sm cursor-pointer font-medium leading-[27px] duration-300;
}

/* Responsive adjustment */
@media (min-width: 640px) {

    .btn-primary,
    .btn-dark,
    .btn-outline-light,
    .btn-outline-primary {
        @apply px-[26px] py-[11px] text-base;
    }
}

/* Variants */
.btn-primary {
    @apply text-white;
    background: linear-gradient(to bottom, var(--color-primary), color-mix(in srgb, var(--color-primary) 70%, black));
    background-size: 100% 200%;
    background-position: top;
    transition: background-position 0.5s ease;
}

.btn-primary:hover {
    background-position: bottom;
}

.btn-dark {
    @apply text-white text-[15px] bg-dark;
}

.btn-dark:hover {
    @apply opacity-85;
}

.btn-outline-light {
    @apply text-dark text-[15px] bg-white border border-slate-200 shadow-none;
}

.btn-outline-light:hover {
    @apply bg-gray-100 border-slate-300;
}

.btn-outline-primary {
    @apply text-primary text-[15px] bg-white border border-primary shadow-none;
}

.btn-outline-primary:hover {
    @apply bg-primary-light;
}

input {
    @apply px-[16px] text-sm w-full py-[11px] border bg-[#f9f9ff] focus:border-primary/60 duration-300 border-gray-300 rounded-sm outline-0
}