/* FitKode Custom Styles */

/* Theme tokens — base.html sets these inline via window.FITKODE_THEME if you want dynamic theming.
   For now they mirror the brand primary defined in base.html's tailwind.config. */
:root {
    --fk-primary: #00C853;
    --fk-primary-focus-ring: rgba(0, 200, 83, 0.2);
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Form input focus states */
input:focus,
select:focus,
textarea:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--fk-primary-focus-ring);
}

/* Loading spinner for HTMX */
.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator {
    display: inline-block;
}

.htmx-request.htmx-indicator {
    display: inline-block;
}

/* Spinner animation */
@keyframes spin {
    to { transform: rotate(360deg); }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Details/summary arrow removal (using Tailwind's group-open instead) */
details summary::-webkit-details-marker {
    display: none;
}

/* Mobile menu transitions */
#mobile-menu {
    transition: all 0.3s ease;
}

/* Card hover effects */
.card-hover {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-hover:hover {
    transform: translateY(-2px);
}