/* Brand fonts */
html, body {
    font-family: 'Inter', system-ui, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.font-heading {
    font-family: 'Cormorant Garamond', Georgia, serif;
}

/* Selection */
::selection {
    background: rgba(91, 44, 94, 0.15);
    color: #2D2D2D;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #7A4B7D; }

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

/* htmx indicator */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: inline-flex; }
.htmx-request.htmx-indicator { display: inline-flex; }

/* Smooth transitions for htmx swaps */
.htmx-swapping { opacity: 0.5; transition: opacity 0.2s ease; }

/* Custom checkbox */
input[type="checkbox"] {
    appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid #d1d5db;
    border-radius: 0.375rem;
    background: white;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

input[type="checkbox"]:checked {
    background: #5B2C5E;
    border-color: #5B2C5E;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E");
    background-size: 100%;
    background-position: center;
}

input[type="checkbox"]:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(91, 44, 94, 0.2);
}

/* Rating stars */
.star-filled { color: #D4943A; }
.star-empty { color: #d1d5db; }

/* Progress bar */
.progress-track {
    background: #F0EDE4;
    border-radius: 9999px;
    height: 6px;
    overflow: hidden;
}

.progress-fill {
    background: #5B2C5E;
    height: 100%;
    border-radius: 9999px;
    transition: width 0.3s ease;
}

/* Dark mode overrides for custom elements */
.dark input[type="checkbox"] {
    background: #2a2230;
    border-color: #555;
}

.dark input[type="checkbox"]:checked {
    background: #9B6B9E;
    border-color: #9B6B9E;
}

.dark .progress-track {
    background: #3a3240;
}

.dark .progress-fill {
    background: #9B6B9E;
}