:root {
    color-scheme: light;
    --accent-50: #eff6ff;
    --accent-100: #dbeafe;
    --accent-200: #bfdbfe;
    --accent-300: #93c5fd;
    --accent-400: #60a5fa;
    --accent-500: #2563eb;
    --accent-600: #1d4ed8;
    --accent-700: #1e40af;
    --accent-900-30: rgba(30, 64, 175, 0.24);
}

html[data-accent="slate"],
body[data-accent="slate"] {
    --accent-50: #f8fafc;
    --accent-100: #f1f5f9;
    --accent-200: #e2e8f0;
    --accent-300: #cbd5e1;
    --accent-400: #94a3b8;
    --accent-500: #475569;
    --accent-600: #334155;
    --accent-700: #1e293b;
    --accent-900-30: rgba(30, 41, 59, 0.24);
}

[x-cloak] { display: none !important; }

html {
    font-family: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
}

.app-body {
    background:
        radial-gradient(circle at top left, rgba(37, 99, 235, 0.05), transparent 24%),
        linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
    background-attachment: fixed;
}

.htmx-indicator {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    opacity: 1;
}

#collection-grid .group {
    transform: translateY(0);
}

#collection-grid .group:hover {
    transform: translateY(-1px);
}

.collection-card {
    will-change: transform, box-shadow;
}

.collection-card:hover {
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.07);
}

@media (max-width: 767px) {
    #collection-grid .group:hover {
        transform: translateY(0);
    }

    .collection-card {
        box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
    }
}

.bg-emerald-50 {
    background-color: var(--accent-50) !important;
}

.bg-emerald-500,
html.dark .dark\:bg-emerald-500 {
    background-color: var(--accent-500) !important;
}

.bg-emerald-600 {
    background-color: var(--accent-600) !important;
}

.text-emerald-600,
.text-emerald-700,
html.dark .dark\:text-emerald-200 {
    color: var(--accent-700) !important;
}

.border-emerald-500,
html.dark .dark\:border-emerald-500 {
    border-color: var(--accent-500) !important;
}

html.dark .dark\:bg-emerald-900\/30 {
    background-color: var(--accent-900-30) !important;
}

.hover\:bg-emerald-100:hover {
    background-color: var(--accent-100) !important;
}

.hover\:bg-emerald-400:hover,
html.dark .dark\:hover\:bg-emerald-400:hover {
    background-color: var(--accent-400) !important;
}

.hover\:bg-emerald-500:hover {
    background-color: var(--accent-500) !important;
}

.focus\:border-emerald-300:focus {
    border-color: var(--accent-300) !important;
}

html.dark .dark\:focus\:border-emerald-500:focus {
    border-color: var(--accent-500) !important;
}

.focus\:ring-emerald-100:focus {
    --tw-ring-color: var(--accent-100) !important;
}

html.dark .dark\:focus\:ring-emerald-900\/30:focus {
    --tw-ring-color: var(--accent-900-30) !important;
}