/* Dynamic CSS from Site Settings */
:root {
    --color-primary: #7d9b76;
    --color-secondary: #b7c9a9;
    --color-accent: #d6a35c;
    --font-family: Inter, sans-serif;
}

body {
    font-family: var(--font-family), system-ui, sans-serif;
}

.bg-primary {
    background-color: var(--color-primary) !important;
}

.text-primary {
    color: var(--color-primary) !important;
}

.border-primary {
    border-color: var(--color-primary) !important;
}

.bg-secondary {
    background-color: var(--color-secondary) !important;
}

.text-secondary {
    color: var(--color-secondary) !important;
}

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

.text-accent {
    color: var(--color-accent) !important;
}

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

.hover\:text-primary:hover {
    color: var(--color-primary) !important;
}

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

.focus\:border-primary:focus {
    border-color: var(--color-primary) !important;
}

/* Gradient backgrounds using dynamic colors */
.from-primary {
    --tw-gradient-from: var(--color-primary) !important;
}

.to-accent {
    --tw-gradient-to: var(--color-accent) !important;
}

/* Avatar utility classes for profile pictures */
.avatar {
    border-radius: 9999px;
    object-fit: cover;
    aspect-ratio: 1 / 1;
    object-position: center;
}

.avatar-xs { width: 2rem; height: 2rem; }      /* 32px - header dropdown */
.avatar-sm { width: 3rem; height: 3rem; }      /* 48px - messages, notifications */
.avatar-md { width: 5rem; height: 5rem; }      /* 80px - edit profile, cards */
.avatar-lg { width: 8rem; height: 8rem; }      /* 128px - profile view */
.avatar-xl { width: 12rem; height: 12rem; }    /* 192px - full profile modal */