/* App-level styles — layers on top of Bootstrap 5 (CDN) + tokens.css.
   No build step: this file is served as-is (blueprint §0). */

body {
    font-family: var(--app-font-body);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--app-font-display);
}

.card {
    border-radius: var(--app-radius-lg);
    box-shadow: var(--app-shadow-sm);
}

.btn {
    border-radius: var(--app-radius-sm);
    transition: box-shadow var(--app-duration-fast) ease, transform var(--app-duration-fast) ease;
}

/* §12 — shared toast/notification visual language, reused by htmx-driven
   frontend interactions so it matches Filament's native admin toasts. */
.app-toast {
    border-radius: var(--app-radius-md);
    box-shadow: var(--app-shadow-lg);
    animation: app-toast-in var(--app-duration-fast) ease-out;
}

@keyframes app-toast-in {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* §12 — shared empty-state pattern for admin + frontend listing views */
.app-empty-state {
    text-align: center;
    padding: var(--app-space-8) var(--app-space-4);
    color: var(--bs-secondary-color);
}

.app-empty-state .app-empty-state-icon {
    font-size: 2.5rem;
    margin-bottom: var(--app-space-3);
    opacity: 0.6;
}

/* htmx swap-in fade, used by public listing "load more" (§2.6 pagination) */
.htmx-added {
    animation: app-toast-in var(--app-duration-base) ease-out;
}