@import url("https://fonts.googleapis.com/css2?family=Cardo:ital,wght@0,400;0,700;1,400&family=Amiri:ital,wght@0,400;0,700;1,400;1,700&display=swap");
@import url("https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css");
@import "tailwindcss";

@theme {
    --color-warm: #f7f5ee;
    --color-card: #f9f9f9;
    --color-primary: #8B7355;
    --color-primary-hover: #7A6449;
    --color-primary-light: #A68B5B;
    --font-cardo: "Cardo", serif;
    --font-amiri: "Amiri", serif;
}

@layer components {
    .pagy{
        &.series-nav {
            @apply flex items-center space-x-2;
            a:not([role="separator"]) { /* all but gaps */
                @apply px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50;
            }

            a[role="link"]:not([aria-current]) { /* disabled links */
                @apply text-gray-400  cursor-not-allowed;
            }

            a[aria-current] { /* current page */
                @apply text-white bg-primary border-primary hover:bg-primary-hover;
            }

            a[aria-label="Next"]:not([aria-disabled="true"]),
            a[aria-label="Previous"]:not([aria-disabled="true"]) {
                @apply border-primary hover:bg-primary hover:text-white
            }
        }
    }
}