.htmx-indicator {
    opacity: 0;
    transition: opacity 500ms ease-in;
}
.htmx-request .htmx-indicator {
    opacity: 1;
}
.htmx-request.htmx-indicator {
    opacity: 1;
}

.bg-whites {
    background-color: #fff;
}

.bg-blacks {
    background-color: #000;
}

/* Cozy cards that feel warm and inviting */
[data-theme="light"] .card {
    background-color: #faf8f4;
    border: 2px solid #e5ddd0;
    box-shadow: 0 8px 16px -4px rgba(61, 53, 41, 0.08), 0 4px 8px -2px rgba(61, 53, 41, 0.05);
    border-radius: 1rem;
}

[data-theme="dark"] .card {
    background-color: #342e28;
    border: 2px solid #443d35;
    box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.3), 0 4px 8px -2px rgba(0, 0, 0, 0.2);
    border-radius: 1rem;
}



/* Enhanced text contrast for better readability */
[data-theme="light"] {
    --tw-prose-body: oklch(10% 0.05 3.958);
    --tw-prose-headings: oklch(5% 0.05 3.958);
    --tw-prose-lead: oklch(25% 0.05 3.958);
    --tw-prose-links: var(--color-primary);
    --tw-prose-bold: oklch(5% 0.05 3.958);
    --tw-prose-counters: oklch(40% 0.05 3.958);
    --tw-prose-bullets: oklch(60% 0.05 3.958);
    --tw-prose-hr: oklch(85% 0.01 343.231);
    --tw-prose-quotes: oklch(20% 0.05 3.958);
    --tw-prose-quote-borders: oklch(85% 0.01 343.231);
    --tw-prose-captions: oklch(40% 0.05 3.958);
    --tw-prose-code: oklch(15% 0.05 3.958);
    --tw-prose-pre-code: oklch(85% 0.01 343.231);
    --tw-prose-pre-bg: oklch(95% 0.005 343.231);
    --tw-prose-th-borders: oklch(80% 0.01 343.231);
    --tw-prose-td-borders: oklch(90% 0.005 343.231);
}

[data-theme="dark"] {
    --tw-prose-body: oklch(95% 0.001 17.911);
    --tw-prose-headings: oklch(98% 0.001 17.911);
    --tw-prose-lead: oklch(80% 0.001 17.911);
    --tw-prose-links: var(--color-primary);
    --tw-prose-bold: oklch(98% 0.001 17.911);
    --tw-prose-counters: oklch(70% 0.001 17.911);
    --tw-prose-bullets: oklch(50% 0.001 17.911);
    --tw-prose-hr: oklch(25% 0.01 17.911);
    --tw-prose-quotes: oklch(85% 0.001 17.911);
    --tw-prose-quote-borders: oklch(25% 0.01 17.911);
    --tw-prose-captions: oklch(70% 0.001 17.911);
    --tw-prose-code: oklch(90% 0.001 17.911);
    --tw-prose-pre-code: oklch(80% 0.001 17.911);
    --tw-prose-pre-bg: oklch(10% 0.005 17.911);
    --tw-prose-th-borders: oklch(30% 0.01 17.911);
    --tw-prose-td-borders: oklch(20% 0.005 17.911);
}

/* Tailwind Typography Plugin Styles */
.prose {
    color: var(--tw-prose-body);
    max-width: 65ch;
}

.prose :where(p):not(:where([class~="not-prose"] *)) {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
}

.prose :where([class~="lead"]):not(:where([class~="not-prose"] *)) {
    color: var(--tw-prose-lead);
    font-size: 1.25em;
    line-height: 1.6;
    margin-top: 1.2em;
    margin-bottom: 1.2em;
}

.prose :where(a):not(:where([class~="not-prose"] *)) {
    color: var(--tw-prose-links);
    text-decoration: underline;
    font-weight: 500;
}

.prose :where(strong):not(:where([class~="not-prose"] *)) {
    color: var(--tw-prose-bold);
    font-weight: 600;
}

.prose :where(ol):not(:where([class~="not-prose"] *)) {
    list-style-type: decimal;
    margin-top: 1.25em;
    margin-bottom: 1.25em;
    padding-left: 1.625em;
}

.prose :where(ol[type="A"]):not(:where([class~="not-prose"] *)) {
    list-style-type: upper-alpha;
}

.prose :where(ol[type="a"]):not(:where([class~="not-prose"] *)) {
    list-style-type: lower-alpha;
}

.prose :where(ol[type="A" s]):not(:where([class~="not-prose"] *)) {
    list-style-type: upper-alpha;
}

.prose :where(ol[type="a" s]):not(:where([class~="not-prose"] *)) {
    list-style-type: lower-alpha;
}

.prose :where(ol[type="I"]):not(:where([class~="not-prose"] *)) {
    list-style-type: upper-roman;
}

.prose :where(ol[type="i"]):not(:where([class~="not-prose"] *)) {
    list-style-type: lower-roman;
}

.prose :where(ol[type="I" s]):not(:where([class~="not-prose"] *)) {
    list-style-type: upper-roman;
}

.prose :where(ol[type="i" s]):not(:where([class~="not-prose"] *)) {
    list-style-type: lower-roman;
}

.prose :where(ol[type="1"]):not(:where([class~="not-prose"] *)) {
    list-style-type: decimal;
}

.prose :where(ul):not(:where([class~="not-prose"] *)) {
    list-style-type: disc;
    margin-top: 1.25em;
    margin-bottom: 1.25em;
    padding-left: 1.625em;
}

.prose :where(ol > li):not(:where([class~="not-prose"] *))::marker {
    font-weight: 400;
    color: var(--tw-prose-counters);
}

.prose :where(ul > li):not(:where([class~="not-prose"] *))::marker {
    color: var(--tw-prose-bullets);
}

.prose :where(hr):not(:where([class~="not-prose"] *)) {
    border-color: var(--tw-prose-hr);
    border-top-width: 1px;
    margin-top: 3em;
    margin-bottom: 3em;
}

.prose :where(blockquote):not(:where([class~="not-prose"] *)) {
    font-weight: 500;
    font-style: italic;
    color: var(--tw-prose-quotes);
    border-left-width: 0.25rem;
    border-left-color: var(--tw-prose-quote-borders);
    quotes: "\201C""\201D""\2018""\2019";
    margin-top: 1.6em;
    margin-bottom: 1.6em;
    padding-left: 1em;
}

.prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"] *))::before {
    content: open-quote;
}

.prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"] *))::after {
    content: close-quote;
}

.prose :where(h1):not(:where([class~="not-prose"] *)) {
    color: var(--tw-prose-headings);
    font-weight: 800;
    font-size: 2.25em;
    margin-top: 0;
    margin-bottom: 0.8888889em;
    line-height: 1.1111111;
}

.prose :where(h1 strong):not(:where([class~="not-prose"] *)) {
    font-weight: 900;
    color: inherit;
}

.prose :where(h2):not(:where([class~="not-prose"] *)) {
    color: var(--tw-prose-headings);
    font-weight: 700;
    font-size: 1.5em;
    margin-top: 2em;
    margin-bottom: 1em;
    line-height: 1.3333333;
}

.prose :where(h2 strong):not(:where([class~="not-prose"] *)) {
    font-weight: 800;
    color: inherit;
}

.prose :where(h3):not(:where([class~="not-prose"] *)) {
    color: var(--tw-prose-headings);
    font-weight: 600;
    font-size: 1.25em;
    margin-top: 1.6em;
    margin-bottom: 0.6em;
    line-height: 1.6;
}

.prose :where(h3 strong):not(:where([class~="not-prose"] *)) {
    font-weight: 700;
    color: inherit;
}

.prose :where(h4):not(:where([class~="not-prose"] *)) {
    color: var(--tw-prose-headings);
    font-weight: 600;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    line-height: 1.5;
}

.prose :where(h4 strong):not(:where([class~="not-prose"] *)) {
    font-weight: 700;
    color: inherit;
}

.prose :where(img):not(:where([class~="not-prose"] *)) {
    margin-top: 2em;
    margin-bottom: 2em;
}

.prose :where(figure > *):not(:where([class~="not-prose"] *)) {
    margin-top: 0;
    margin-bottom: 0;
}

.prose :where(figcaption):not(:where([class~="not-prose"] *)) {
    color: var(--tw-prose-captions);
    font-size: 0.875em;
    line-height: 1.4285714;
    margin-top: 0.8571429em;
}

.prose :where(code):not(:where([class~="not-prose"] *)) {
    color: var(--tw-prose-code);
    font-weight: 600;
    font-size: 0.875em;
}

.prose :where(code):not(:where([class~="not-prose"] *))::before {
    content: "`";
}

.prose :where(code):not(:where([class~="not-prose"] *))::after {
    content: "`";
}

.prose :where(a code):not(:where([class~="not-prose"] *)) {
    color: inherit;
}

.prose :where(h1 code):not(:where([class~="not-prose"] *)) {
    color: inherit;
}

.prose :where(h2 code):not(:where([class~="not-prose"] *)) {
    color: inherit;
    font-size: 0.875em;
}

.prose :where(h3 code):not(:where([class~="not-prose"] *)) {
    color: inherit;
    font-size: 0.9em;
}

.prose :where(h4 code):not(:where([class~="not-prose"] *)) {
    color: inherit;
}

.prose :where(blockquote code):not(:where([class~="not-prose"] *)) {
    color: inherit;
}

.prose :where(thead th):not(:where([class~="not-prose"] *)) {
    color: var(--tw-prose-headings);
    font-weight: 600;
    vertical-align: bottom;
    padding-right: 0.5714286em;
    padding-bottom: 0.5714286em;
    padding-left: 0.5714286em;
}

.prose :where(thead th:first-child):not(:where([class~="not-prose"] *)) {
    padding-left: 0;
}

.prose :where(thead th:last-child):not(:where([class~="not-prose"] *)) {
    padding-right: 0;
}

.prose :where(tbody td, tfoot td):not(:where([class~="not-prose"] *)) {
    padding-top: 0.5714286em;
    padding-right: 0.5714286em;
    padding-bottom: 0.5714286em;
    padding-left: 0.5714286em;
}

.prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"] *)) {
    padding-left: 0;
}

.prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"] *)) {
    padding-right: 0;
}

.prose :where(pre):not(:where([class~="not-prose"] *)) {
    color: var(--tw-prose-pre-code);
    background-color: var(--tw-prose-pre-bg);
    overflow-x: auto;
    font-weight: 400;
    font-size: 0.875em;
    line-height: 1.7142857;
    margin-top: 1.7142857em;
    margin-bottom: 1.7142857em;
    border-radius: 0.375rem;
    padding-top: 0.8571429em;
    padding-right: 1.1428571em;
    padding-bottom: 0.8571429em;
    padding-left: 1.1428571em;
}

.prose :where(pre code):not(:where([class~="not-prose"] *)) {
    background-color: transparent;
    border-width: 0;
    border-radius: 0;
    padding: 0;
    font-weight: inherit;
    color: inherit;
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
}

.prose :where(pre code):not(:where([class~="not-prose"] *))::before {
    content: none;
}

.prose :where(pre code):not(:where([class~="not-prose"] *))::after {
    content: none;
}

.prose :where(table):not(:where([class~="not-prose"] *)) {
    width: 100%;
    table-layout: auto;
    text-align: left;
    margin-top: 2em;
    margin-bottom: 2em;
    font-size: 0.875em;
    line-height: 1.7142857;
}

.prose :where(thead):not(:where([class~="not-prose"] *)) {
    border-bottom-width: 1px;
    border-bottom-color: var(--tw-prose-th-borders);
}

.prose :where(tbody tr):not(:where([class~="not-prose"] *)) {
    border-bottom-width: 1px;
    border-bottom-color: var(--tw-prose-td-borders);
}

.prose :where(tbody tr:last-child):not(:where([class~="not-prose"] *)) {
    border-bottom-width: 0;
}

.prose :where(tbody td):not(:where([class~="not-prose"] *)) {
    vertical-align: baseline;
}

.prose-sm {
    font-size: 0.875rem;
    line-height: 1.7142857;
}

.prose-sm :where(p):not(:where([class~="not-prose"] *)) {
    margin-top: 1.1428571em;
    margin-bottom: 1.1428571em;
}

.prose-lg {
    font-size: 1.125rem;
    line-height: 1.7777778;
}

.prose-lg :where(p):not(:where([class~="not-prose"] *)) {
    margin-top: 1.3333333em;
    margin-bottom: 1.3333333em;
}

.prose-xl {
    font-size: 1.25rem;
    line-height: 1.8;
}

.prose-xl :where(p):not(:where([class~="not-prose"] *)) {
    margin-top: 1.2em;
    margin-bottom: 1.2em;
}

.prose-2xl {
    font-size: 1.5rem;
    line-height: 1.6666667;
}

.prose-2xl :where(p):not(:where([class~="not-prose"] *)) {
    margin-top: 1.0666667em;
    margin-bottom: 1.0666667em;
}



/* Avatar enhanced contrast */
[data-theme="light"] .avatar .bg-neutral {
    background-color: oklch(15% 0.153 2.432) !important;
    color: oklch(95% 0.005 343.231) !important;
}

[data-theme="dark"] .avatar .bg-neutral {
    background-color: oklch(85% 0.02 171.364) !important;
    color: oklch(5% 0.039 171.364) !important;
}



/* Cozy Coffee Table Design - Warm and inviting */
/* Make all UI elements soft and comfortable like sitting at a coffee table */

/* Cozy card styling with gentle shadows */
[data-theme="light"] .card,
[data-theme="dark"] .card {
    border-radius: 1rem !important;
    border-width: 2px !important;
    box-shadow: 0 10px 25px -5px rgba(61, 53, 41, 0.1), 0 8px 10px -6px rgba(61, 53, 41, 0.08) !important;
    transition: all 0.3s ease !important;
}

[data-theme="light"] .card:hover,
[data-theme="dark"] .card:hover {
    box-shadow: 0 15px 35px -5px rgba(61, 53, 41, 0.15), 0 10px 15px -6px rgba(61, 53, 41, 0.1) !important;
    transform: translateY(-2px) !important;
}



/* Soft, rounded input and form styling */
.input, .textarea, .select {
    border-radius: 0.75rem !important;
    border-width: 2px !important;
    border-color: var(--color-base-300) !important;
    transition: all 0.2s ease !important;
}

.input:focus, .textarea:focus, .select:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(139, 111, 71, 0.1) !important;
}

/* Gentle navigation and header elements */
.navbar {
    border-radius: 0 0 1rem 1rem !important;
    border-bottom: 2px solid var(--color-base-300) !important;
    box-shadow: 0 4px 6px -1px rgba(61, 53, 41, 0.05) !important;
}

/* Cozy modal and overlay styling */
.modal-box {
    border-radius: 1.25rem !important;
    border: 2px solid var(--color-base-300) !important;
    box-shadow: 0 20px 40px -10px rgba(61, 53, 41, 0.2) !important;
}

/* Typography adjustments for cozy reading */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: -0.02em !important;
    line-height: 1.3 !important;
}

/* Soft progress and loading indicators */
.progress {
    border-radius: 1rem !important;
    border: 1px solid var(--color-base-300) !important;
    overflow: hidden !important;
}