:root {
    color-scheme: light dark;
    --bg: #f5f5f5;
    --bg-elevated: #ffffff;
    --bg-muted: #efefef;
    --header-bg: rgba(255, 255, 255, 0.92);
    --text: #111111;
    --text-muted: #595959;
    --text-subtle: #757575;
    --border: #d6d6d6;
    --shadow: rgba(0, 0, 0, 0.08);

    --button-bg: #111111;
    --button-text: #ffffff;
    --button-border: #111111;

    --button-secondary-bg: #ffffff;
    --button-secondary-text: #111111;
    --button-secondary-border: #cfcfcf;

    --badge-bg: #111111;
    --badge-text: #ffffff;

    --error: #8b1f1f;
    --error-bg: rgba(139, 31, 31, 0.08);

    --success: #1f5134;
    --success-bg: rgba(31, 81, 52, 0.08);

    --link: #1f1f1f;
    --toast-bg: #ffffff;
    --toast-text: #111111;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #090909;
        --bg-elevated: #151515;
        --bg-muted: #1d1d1d;
        --header-bg: rgba(12, 12, 12, 0.92);
        --text: #f5f5f5;
        --text-muted: #c1c1c1;
        --text-subtle: #9f9f9f;
        --border: #333333;
        --shadow: rgba(0, 0, 0, 0.45);

        --button-bg: #f5f5f5;
        --button-text: #111111;
        --button-border: #f5f5f5;

        --button-secondary-bg: #111111;
        --button-secondary-text: #f5f5f5;
        --button-secondary-border: #3a3a3a;

        --badge-bg: #f5f5f5;
        --badge-text: #111111;

        --error: #ffb4b4;
        --error-bg: rgba(255, 108, 108, 0.14);

        --success: #b8f5d3;
        --success-bg: rgba(110, 255, 176, 0.12);

        --link: #f5f5f5;
        --toast-bg: #1a1a1a;
        --toast-text: #f5f5f5;
    }
}

html,
body {
    min-height: 100%;
}

body {
    font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
}

h1,
h2,
h3,
h4,
h5,
h6,
.hero-title {
    font-family: "Poppins", "Helvetica Neue", Arial, sans-serif;
    color: var(--text);
}

.site-shell {
    min-height: 100vh;
    background-image:
        linear-gradient(rgba(127, 127, 127, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(127, 127, 127, 0.08) 1px, transparent 1px);
    background-size: 32px 32px;
}

.glass-card {
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: var(--bg-elevated);
    box-shadow: 0 10px 24px var(--shadow);
}

.topbar-link {
    color: var(--text-muted);
    transition: color 0.18s ease;
}

.brand-link {
    color: var(--text);
}

.topbar-link:hover {
    color: var(--text);
}

.site-header {
    background: var(--header-bg);
    border-color: var(--border);
}

.cart-link {
    border-color: var(--border);
    background: var(--bg-elevated);
    color: var(--text);
}

.cart-link:hover {
    border-color: var(--text);
}

.btn-primary {
    border-radius: 0.75rem;
    border: 1px solid var(--button-border);
    background: var(--button-bg);
    color: var(--button-text);
    font-weight: 600;
    transition: transform 0.12s ease, opacity 0.2s ease;
}

.btn-primary:hover {
    transform: translateY(-1px);
    opacity: 0.92;
}

.btn-secondary {
    border-radius: 0.75rem;
    border: 1px solid var(--button-secondary-border);
    background: var(--button-secondary-bg);
    color: var(--button-secondary-text);
    font-weight: 600;
}

.form-input {
    width: 100%;
    border-radius: 0.75rem;
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--text);
}

.form-input:focus {
    border-color: var(--text);
    box-shadow: 0 0 0 3px rgba(127, 127, 127, 0.2);
    outline: none;
}

.badge {
    border-radius: 9999px;
    border: 1px solid var(--border);
    background: var(--bg-muted);
    color: var(--text-muted);
    font-size: 0.72rem;
    line-height: 1;
    padding: 0.3rem 0.55rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.description-toggle {
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 9999px;
    background: var(--bg-muted);
    padding: 0.2rem 0.65rem;
}

.description-toggle:hover {
    color: var(--text);
}

.product-description {
    position: relative;
}

.product-description.is-collapsed {
    max-height: 8.5rem;
    overflow: hidden;
}

.product-description.is-collapsed::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2.25rem;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--bg-elevated));
}

.markdown-content {
    color: var(--text-muted);
}

.markdown-content > *:first-child {
    margin-top: 0;
}

.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4 {
    color: var(--text);
    font-weight: 700;
    margin-top: 0.9rem;
    margin-bottom: 0.45rem;
}

.markdown-content p,
.markdown-content ul,
.markdown-content ol,
.markdown-content pre,
.markdown-content blockquote {
    margin-top: 0.65rem;
    margin-bottom: 0.65rem;
}

.markdown-content a {
    color: var(--link);
    text-decoration: underline;
    text-underline-offset: 0.18rem;
}

.markdown-content img {
    max-width: 100%;
    border-radius: 0.85rem;
    border: 1px solid var(--border);
    margin-top: 0.8rem;
}

.markdown-content code,
code {
    border-radius: 0.45rem;
    border: 1px solid var(--border);
    background: var(--bg-muted);
    color: var(--text);
    padding: 0.08rem 0.38rem;
}

.toast {
    border-radius: 0.75rem;
    border: 1px solid var(--border);
    background: var(--toast-bg);
    color: var(--toast-text);
    padding: 0.75rem 0.95rem;
    box-shadow: 0 10px 22px var(--shadow);
}

.toast.error {
    border-color: var(--error);
    color: var(--error);
}

#cart-count-badge {
    background: var(--badge-bg) !important;
    color: var(--badge-text) !important;
    border-color: var(--button-border) !important;
}

/* Normalize the existing Tailwind color utility usage to the active theme palette. */
.text-slate-50,
.text-slate-100,
.text-slate-950 {
    color: var(--text) !important;
}

.text-slate-300,
.text-slate-400,
.text-cyan-300,
.text-cyan-200,
.text-sky-200,
.text-emerald-100,
.text-emerald-200,
.text-amber-100 {
    color: var(--text-muted) !important;
}

.text-rose-200,
.text-rose-300 {
    color: var(--error) !important;
}

.border-slate-800\/80,
.border-slate-700\/70,
.border-slate-700\/80,
.border-slate-700\/60,
.border-cyan-300\/50,
.border-cyan-400\/70,
.border-amber-300\/45,
.border-sky-300\/30,
.border-rose-300\/40,
.border-rose-300\/45,
.border-rose-400\/60,
.border-emerald-300\/50,
.border-emerald-300\/55,
.border-emerald-300\/60,
.border-emerald-400\/60 {
    border-color: var(--border) !important;
}

.bg-slate-950\/90,
.bg-slate-950\/70,
.bg-slate-900\/70,
.bg-slate-900\/65,
.bg-cyan-500\/15,
.bg-emerald-500\/15,
.bg-rose-500\/10,
.bg-rose-500\/15,
.bg-amber-500\/15,
.bg-sky-500\/10 {
    background: var(--bg-muted) !important;
}

.bg-emerald-500 {
    background: var(--badge-bg) !important;
}

.text-slate-950 {
    color: var(--badge-text) !important;
}