/* Both themes' full color identity for the furniture-search chat UI — the base (dark) theme's
   defaults live in :root below, the optional "Mara style" reskin's overrides (palette/type
   borrowed from the real MetricLy/Mara consumer design system: warm cream/ink, italic
   serif-weight headings, sharp corners) live under body.theme-mara, toggled by theme-toggle.js.
   layout.css (all structural CSS, shared unconditionally by both themes) never hardcodes a
   color itself — every rule there reads one of these variables, which is why very little is
   left here beyond the two palettes: mostly backgrounds/borders/text stay pure variable swaps,
   resolved automatically once body.theme-mara is (or isn't) present, no !important needed.
   What's left below is genuinely mara-only structural additions (a couple of borders/radii
   base doesn't have) and the handful of deliberately different per-theme choices (chip text,
   link color inside prose/cards, placeholder tone, inline-code color) that aren't pure swaps. */

:root {
    --bg: #202123;
    --surf: #444654;
    --rule: #3a3a46;
    --rule2: #555;
    --text: #ccc;
    --text-sub: #888;
}

body.theme-mara {
    --bg: #faf8f5;
    --surf: #f0eae2;
    --rule: #ddd4c8;
    --rule2: #c8b8a8;
    --ink: #2c2018;
    --sub: #6b5448;
    --sans: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;

    /* Shared text-color tiers — read by layout.css and every inline JS style
       (var(--text[-sub], fallback-hex) there), so this is the one place either theme's text
       hierarchy is defined. */
    --text: var(--ink);
    --text-sub: var(--sub);

    /* Consumed by settings.js's inline styles (var(...,fallback) there) — not read anywhere else,
       kept here rather than duplicated as bare hex so the toggle-button/range colors have one
       definition. */
    --toggle-off-bg: var(--surf);
    --toggle-off-border: var(--rule2);
    --toggle-off-text: var(--sub);
    --toggle-on-bg: var(--ink);
    --toggle-on-border: var(--ink);
    --toggle-on-text: #fff;
    --range-accent: var(--ink);

    background-color: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
}

/* Warm-toned scrollbar (WebKit) instead of the browser's dark-UA default. */
body.theme-mara ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
body.theme-mara ::-webkit-scrollbar-track {
    background: var(--bg);
}
body.theme-mara ::-webkit-scrollbar-thumb {
    background: var(--rule2);
    border-radius: 999px;
}
body.theme-mara {
    scrollbar-color: var(--rule2) var(--bg);
}

/* ── header ── */
body.theme-mara .header {
    /* Base has no border/padding here at all — a divider under the header is purely a mara touch. */
    border-bottom: 1px solid var(--rule);
    padding-bottom: 1.2rem;
}
body.theme-mara .header h3 {
    font-style: italic;
    font-weight: 300;
    letter-spacing: -0.01em;
}
body.theme-mara .theme-toggle.active {
    /* Text-on-a-colored-chip, not page text — stays a fixed white regardless of theme, same as
       the base (non-mara) theme's own .theme-toggle.active. Border resolves to var(--text)
       automatically (== var(--ink) here), matching base's own hover/active border convention. */
    color: #fff;
    background-color: var(--ink);
}

/* ── settings panel ── */
body.theme-mara .settings-group-body input[type="checkbox"] {
    accent-color: var(--ink);
}

/* ── chat thread ── */
body.theme-mara .user-message .message-content {
    /* Background now resolves automatically via --surf; border/radius are mara-only additions. */
    border: 1px solid var(--rule);
    border-radius: 4px;
}
body.theme-mara .message-content pre {
    /* Background now resolves automatically via --surf; the border is a mara-only addition. */
    border: 1px solid var(--rule);
}
body.theme-mara .message-content code {
    /* Deliberately --sub, not the primary --ink other message text uses — inline code reads
       slightly de-emphasized against the surrounding prose. Background resolves via --surf. */
    color: var(--sub);
}
body.theme-mara .message-content a,
body.theme-mara .product-link {
    /* Deliberately ink, not the base theme's blue link color — matches the surrounding prose
       instead of standing out as a distinct accent color. */
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--rule2);
}

/* ── composer ── */
body.theme-mara .input-box {
    /* Page color, not --surf, so it reads as part of the page rather than a separate panel. Full
       1px border on all sides (base uses 2px) so the search box reads as a clear, bounded control
       with sharp (not rounded) corners. */
    background-color: var(--bg) !important;
    border: 1px solid var(--rule2) !important;
    border-radius: 0 !important;
}
body.theme-mara .input-box::placeholder {
    /* Deliberately the faint rule tone, not --text-sub — placeholder text reads lighter than
       real muted content. */
    color: var(--rule2) !important;
}
body.theme-mara .attach-badge {
    /* Base has no border on the wrapper itself — mara-only addition. */
    border: 1px solid var(--rule);
}
body.theme-mara .attach-badge .attach-remove {
    /* Text/fill-on-a-colored-chip, not page text — see .theme-toggle.active above. */
    background-color: var(--ink);
    border-color: var(--ink);
    color: #fff;
}
body.theme-mara .attach-badge .attach-mode-tag {
    background-color: var(--ink);
    color: #fff;
}

/* ── "try one of these" sidebar ── */
body.theme-mara .try-sidebar-row {
    /* Border now resolves automatically via --rule; the transition is a mara-only addition. */
    transition: padding-left 0.15s var(--e, ease);
}
body.theme-mara .try-sidebar-row:hover {
    /* Border now resolves automatically via --text; the padding shift is a mara-only addition. */
    padding-left: 6px;
}

/* ── search indicator / collapsible details ── */
body.theme-mara .details-content img {
    /* No base equivalent — item-crop images have transparent padding that only needs a panel
       background against mara's light --surf, not base's darker one. */
    background: var(--surf) !important;
}

/* ── product cards ── */
body.theme-mara .product-card {
    /* Border only — background now resolves automatically via --surf (render.js). Base has no
       border on product cards at all, so this stays a mara-only addition. */
    border: 1px solid var(--rule);
}
body.theme-mara .product-card .product-link {
    /* Deliberately ink, not the base theme's blue — same reasoning as .message-content a above. */
    color: var(--ink) !important;
}

/* ── image picker popover / tutorial modal ── */
body.theme-mara .image-picker-upload-row {
    /* Deliberately --sub here even though the base theme treats this row as primary text —
       reads better de-emphasized against the popover's white background. Border now resolves
       automatically via --rule. */
    color: var(--sub);
}
body.theme-mara .tutorial-close button {
    /* Text/fill-on-a-colored-chip, not page text — see .theme-toggle.active above. Removes the
       border entirely rather than reusing base's own control-border tone. */
    background-color: var(--ink);
    color: #fff;
    border: 0;
}
body.theme-mara .tutorial-close button:hover {
    background-color: #4a3728;
    border-color: transparent;
}

/* Narrow screens: shrink the toggle so it doesn't crowd the title — the pre-existing
   settings/help icons have the same crowding risk, untouched here since that's the barebones
   theme's own layout, not something this file should change. */
@media (max-width: 480px) {
    body.theme-mara .theme-toggle {
        padding: 4px 8px;
        font-size: 0.68em;
        gap: 4px;
    }
}