@import "tailwindcss" source(none);
@plugin "@tailwindcss/typography";
@source "./components/*.templ";

@theme {
    --color-brand: oklch(55.14% 0.1251 248.34);
    --color-brand-400: oklch(from var(--color-brand) calc(l/2 + .4) c h);
    --color-brand-500: var(--color-brand);
    --color-brand-600: oklch(from var(--color-brand) calc(l/2 + .2) c h);
    --color-brand-700: oklch(from var(--color-brand) calc(l/2 + .1) c h);
    --color-brand-800: oklch(from var(--color-brand) calc(l/2 + .06) c h);

    --color-base-light-100: var(--color-white);
    --color-base-light-200: var(--color-zinc-100);
    --color-base-light-300: var(--color-zinc-300);
    --color-base-dark-100: var(--color-zinc-900);
    --color-base-dark-200: var(--color-zinc-800);
    --color-base-dark-300: var(--color-zinc-700);
}

@utility shadow-glass {
    box-shadow: inset -1px 1px 3px 0 rgba(0, 0, 0, 0.2), 0px 0px 5px 0px rgba(0, 0, 0, 0.1);

    @variant dark {
        box-shadow: inset -1px 1px 3px 0 rgba(255, 255, 255, 0.3), 0px 0px 5px 0px rgba(0, 0, 0, 0.4);
    }
}

@layer base {
    body {
        @apply bg-base-light-100;

        @variant dark {
            @apply bg-base-dark-100 text-zinc-300;
        }
    }

    h1,
    h2,
    h3,
    h4 {
        @apply font-bold;
    }

    h1 {
        @apply text-4xl;
    }

    h2 {
        @apply text-2xl;
    }
}

@layer components {
    .navbar {
        @apply flex max-sm:flex-col max-sm:items-stretch items-center gap-2 p-2 shadow-glass rounded-3xl min-h-16;
    }

    .flashes {
        @apply fixed bottom-4 right-4 flex flex-col gap-2;
    }

    .flash {
        @apply px-4 py-2 rounded-md shadow-sm bg-base-light-100 border-4 border-base-light-300 transition-discrete transition-opacity;

        @variant dark {
            @apply bg-base-dark-100 border-base-dark-300;
        }
    }

    .flash.ok {
        @apply border-green-600;

        @variant dark {
            @apply border-green-800;
        }
    }

    .flash.error {
        @apply border-red-600;

        @variant dark {
            @apply border-red-800;
        }
    }

    .footer.footer-center {
        @apply p-10 flex flex-col gap-1 items-center;
    }

    .btn-neutral {
        @apply bg-base-light-100 shadow-sm shadow-glass;

        @variant dark {
            @apply bg-base-dark-100;
        }
    }

    .btn-primary {
        @apply bg-brand-400 shadow-sm shadow-glass hover:bg-brand-400;

        @variant dark {
            @apply bg-brand-600;
        }
    }

    .btn-error {
        @apply bg-red-600;

        @variant dark {
            @apply bg-red-800;
        }
    }

    .btn {
        @apply px-4 py-2 cursor-pointer font-bold text-sm text-center rounded-xl uppercase duration-200 hover:bg-base-light-300;

        @variant dark {
            @apply hover:bg-base-dark-300;
        }
    }

    .btn-primary {
        @apply text-white bg-brand-500 shadow-sm shadow-glass hover:bg-brand-600;

        @variant dark {
            @apply bg-brand-700 hover:bg-brand-800;
        }
    }

    .label-text {
        @apply text-sm
    }

    .input {
        @apply px-2 py-1.5 rounded-xl duration-200 border border-zinc-300 shadow-glass;

        @variant dark {
            @apply bg-base-dark-100 border-base-dark-300;
        }
    }

    .input-confirm {
        @apply flex gap-4 items-center;
    }

    .input-confirm .input-confirm-request:not(:checked)~.input-confirm-confirm {
        @apply hidden;
    }
}
