/* ============================================
   BROWNSTONE INTELLIGENCE — Dark / Light Theme
   ============================================ */

/* --- Dark Mode (default) --- */
:root {
    --bg-primary: #483C32;
    --bg-secondary: #3D332B;
    --bg-tertiary: #362d26;
    --bg-header: rgba(72, 60, 50, 0.80);

    --text-primary: #ffffff;
    --text-secondary: #d4d4d8;
    --text-muted: #a1a1aa;
    --text-faint: #71717a;
    --text-faintest: #52525b;

    --accent: #c084fc;          /* purple-400 */
    --accent-hover: #d8b4fe;    /* purple-300 */
    --accent-muted: #a855f7;    /* purple-500 */

    --glass-bg: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.08);
    --border-subtle: rgba(255, 255, 255, 0.05);
    --border-medium: rgba(255, 255, 255, 0.10);
    --border-strong: rgba(255, 255, 255, 0.20);

    --surface-overlay: rgba(255, 255, 255, 0.05);
    --surface-dark: rgba(0, 0, 0, 0.20);

    --scrollbar-track: #362d26;
    --scrollbar-thumb: #5a4b3f;
    --scrollbar-hover: #6d5b4d;

    --gradient-start: #fff;
    --gradient-end: #d4d4d8;

    --btn-solid-bg: #ffffff;
    --btn-solid-text: #000000;
    --btn-solid-hover: #e5e5e5;

    --glow-color: rgba(147, 51, 234, 0.10);

    --selection-bg: rgba(168, 85, 247, 0.30);
    --selection-text: #e9d5ff;
}

/* --- Light Mode --- */
[data-theme="light"] {
    --bg-primary: #F5F0EB;
    --bg-secondary: #EDE6DF;
    --bg-tertiary: #E5DDD5;
    --bg-header: rgba(245, 240, 235, 0.85);

    --text-primary: #2D241E;
    --text-secondary: #4A3F37;
    --text-muted: #6B5D52;
    --text-faint: #8A7A6D;
    --text-faintest: #A89888;

    --accent: #9333ea;          /* purple-600 */
    --accent-hover: #7e22ce;    /* purple-700 */
    --accent-muted: #a855f7;    /* purple-500 */

    --glass-bg: rgba(0, 0, 0, 0.03);
    --glass-border: rgba(0, 0, 0, 0.08);
    --border-subtle: rgba(0, 0, 0, 0.06);
    --border-medium: rgba(0, 0, 0, 0.10);
    --border-strong: rgba(0, 0, 0, 0.18);

    --surface-overlay: rgba(0, 0, 0, 0.04);
    --surface-dark: rgba(0, 0, 0, 0.06);

    --scrollbar-track: #E5DDD5;
    --scrollbar-thumb: #C4B5A5;
    --scrollbar-hover: #B0A090;

    --gradient-start: #2D241E;
    --gradient-end: #4A3F37;

    --btn-solid-bg: #2D241E;
    --btn-solid-text: #F5F0EB;
    --btn-solid-hover: #3D332B;

    --glow-color: rgba(147, 51, 234, 0.08);

    --selection-bg: rgba(147, 51, 234, 0.20);
    --selection-text: #581c87;
}

/* --- Base Styles Using Variables --- */
body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    margin: 0;
    transition: background-color 0.3s ease, color 0.3s ease;
}

::selection {
    background: var(--selection-bg);
    color: var(--selection-text);
}

.mono { font-family: 'JetBrains Mono', monospace; }

.glass {
    background: var(--glass-bg);
    backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
}

.text-gradient {
    background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@keyframes fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fade-in 0.8s ease-out forwards; }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); }

/* --- Theme-Aware Overrides for Tailwind Hardcoded Colors --- */

/* Header */
header.theme-header {
    background-color: var(--bg-header);
    border-bottom: 1px solid var(--border-subtle);
}

/* Backgrounds */
.theme-bg-primary { background-color: var(--bg-primary) !important; }
.theme-bg-secondary { background-color: var(--bg-secondary) !important; }
.theme-bg-tertiary { background-color: var(--bg-tertiary) !important; }

/* Text */
.theme-text-primary { color: var(--text-primary) !important; }
.theme-text-secondary { color: var(--text-secondary) !important; }
.theme-text-muted { color: var(--text-muted) !important; }
.theme-text-faint { color: var(--text-faint) !important; }
.theme-text-faintest { color: var(--text-faintest) !important; }
.theme-text-accent { color: var(--accent) !important; }

/* Borders */
.theme-border-subtle { border-color: var(--border-subtle) !important; }
.theme-border-medium { border-color: var(--border-medium) !important; }
.theme-border-strong { border-color: var(--border-strong) !important; }

/* Surfaces */
.theme-surface { background-color: var(--surface-overlay) !important; }
.theme-surface-dark { background-color: var(--surface-dark) !important; }

/* Buttons */
.theme-btn-solid {
    background-color: var(--btn-solid-bg) !important;
    color: var(--btn-solid-text) !important;
}
.theme-btn-solid:hover {
    background-color: var(--btn-solid-hover) !important;
}
.theme-btn-outline {
    border-color: var(--border-medium) !important;
    color: var(--text-primary) !important;
}
.theme-btn-outline:hover {
    background-color: var(--surface-overlay) !important;
}

/* Glow */
.theme-glow { background-color: var(--glow-color) !important; }

/* Nav links */
.theme-nav-active { color: var(--text-primary) !important; }
.theme-nav-inactive { color: var(--text-faint) !important; }
.theme-nav-inactive:hover { color: var(--text-primary) !important; }

/* Tags / Chips */
.theme-chip {
    border-color: var(--border-subtle) !important;
    background-color: var(--surface-overlay) !important;
    color: var(--text-faint) !important;
}

/* Inquire CTA in header */
.theme-btn-cta {
    border-color: var(--border-medium) !important;
    color: var(--text-primary) !important;
}
.theme-btn-cta:hover {
    background-color: var(--btn-solid-bg) !important;
    color: var(--btn-solid-text) !important;
}

/* Toggle button */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border-medium);
    background: transparent;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.2s ease;
}
.theme-toggle:hover {
    color: var(--text-primary);
    background: var(--surface-overlay);
}
.theme-toggle svg {
    width: 16px;
    height: 16px;
}
/* Show/hide icons */
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="light"] .theme-toggle .icon-sun { display: block; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }

/* Pill / status indicator in light mode */
.theme-pill {
    border-color: var(--border-medium) !important;
    background-color: var(--surface-overlay) !important;
    color: var(--accent) !important;
}

/* Grid gap lines */
.theme-grid-gap { background-color: var(--border-medium) !important; }

/* Image card bg */
.theme-img-bg { background-color: var(--bg-tertiary) !important; }

/* Card arrow icon */
.theme-icon-circle {
    border-color: var(--border-medium) !important;
}
[data-theme="light"] .theme-icon-circle svg { stroke: var(--text-primary); }

/* Footer text adjustments */
.theme-footer-text { color: var(--text-muted) !important; }
.theme-footer-link { color: var(--text-faint) !important; }
.theme-footer-link:hover { color: var(--text-primary) !important; }

/* Plus icon on vibe page placeholder */
[data-theme="light"] .theme-plus-icon svg { stroke: var(--text-primary); }