/* Theme variables */

:root {
    /* Light theme (Grayscale) */
    --primary-color: #374151;
    --primary-hover: #1f2937;
    --text-color: #1f2937;
    --text-muted: #6b7280;
    --bg-color: #f9fafb;
    --card-bg: #ffffff;
    --sidebar-bg: #ffffff;
    --nav-bg: #ffffff;
    --header-bg: #f3f4f6;
    --input-bg: #ffffff;
    --code-bg: #f3f4f6;
    --secondary-bg: #e5e7eb;
    --border-color: #e5e7eb;
    --hover-bg: #f3f4f6;
    --prompt-bg: #f3f4f6;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Dark theme (BrightBlack/White) */
[data-theme="dark"] {
    --primary-color: #f9fafb;
    --primary-hover: #ffffff;
    --text-color: #f9fafb;
    --text-muted: #9ca3af;
    --bg-color: #0a0a0a;
    --card-bg: #1a1a1a;
    --sidebar-bg: #1a1a1a;
    --nav-bg: #1a1a1a;
    --header-bg: #2a2a2a;
    --input-bg: #2a2a2a;
    --code-bg: #2a2a2a;
    --secondary-bg: #2a2a2a;
    --border-color: #2a2a2a;
    --hover-bg: #333333;
    --prompt-bg: #1a1a1a;
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* System theme - follows OS preference */
@media (prefers-color-scheme: dark) {
    [data-theme="system"] {
        --primary-color: #f9fafb;
        --primary-hover: #ffffff;
        --text-color: #f9fafb;
        --text-muted: #9ca3af;
        --bg-color: #0a0a0a;
        --card-bg: #1a1a1a;
        --sidebar-bg: #1a1a1a;
        --nav-bg: #1a1a1a;
        --header-bg: #2a2a2a;
        --input-bg: #2a2a2a;
        --code-bg: #2a2a2a;
        --secondary-bg: #2a2a2a;
        --border-color: #2a2a2a;
        --hover-bg: #333333;
        --prompt-bg: #1a1a1a;
        --shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.4);
    }
}

/* Base body styling with theme variables */
body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

/* Status colors - grayscale approach */
.status-online {
    background: #4b5563;
    color: #ffffff;
}

.status-offline {
    background: #9ca3af;
    color: #ffffff;
}

.status-active {
    background: #374151;
    color: #ffffff;
}

.status-disabled {
    background: #6b7280;
    color: #ffffff;
}

/* Flash messages - grayscale */
.flash-success {
    background: #4b5563;
    color: #ffffff;
}

.flash-error {
    background: #1f2937;
    color: #ffffff;
}

/* Thread status colors - grayscale */
.status-open {
    background: #4b5563;
    color: #ffffff;
}

.status-closed {
    background: #1f2937;
    color: #ffffff;
}

.status-archived {
    background: #9ca3af;
    color: #ffffff;
}

/* Author type badges - grayscale */
.author-admin {
    background: #374151;
    color: #ffffff;
}

.author-agent {
    background: #6b7280;
    color: #ffffff;
}

/* Button adjustments for dark theme */
[data-theme="dark"] .btn-primary {
    background: var(--primary-color);
    color: #1a1a1a;
}

[data-theme="dark"] .btn-primary:hover {
    background: var(--primary-hover);
}

[data-theme="dark"] .btn-secondary {
    background: var(--secondary-bg);
    color: var(--text-color);
    border-color: var(--border-color);
}

[data-theme="dark"] .btn-small {
    background: var(--input-bg);
    color: var(--text-color);
}

[data-theme="dark"] .btn-copy {
    background: var(--primary-color);
    color: #1a1a1a;
}

[data-theme="dark"] .theme-btn.active {
    background: var(--primary-color);
    color: #1a1a1a;
    border-color: var(--primary-color);
}

[data-theme="dark"] .user-avatar {
    background: var(--primary-color);
    color: #1a1a1a;
}

[data-theme="dark"] .sidebar-brand .logo-icon {
    border-color: rgba(255, 255, 255, 0.3);
}

/* Input focus states */
input:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(55, 65, 81, 0.2);
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    box-shadow: 0 0 0 2px rgba(249, 250, 251, 0.1);
}

/* Scrollbar styling for dark mode */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--bg-color);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

@media (prefers-color-scheme: dark) {
    [data-theme="system"] ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    [data-theme="system"] ::-webkit-scrollbar-track {
        background: var(--bg-color);
    }

    [data-theme="system"] ::-webkit-scrollbar-thumb {
        background: var(--border-color);
        border-radius: 4px;
    }

    /* Button adjustments for system dark mode */
    [data-theme="system"] .btn-primary {
        background: var(--primary-color);
        color: #1a1a1a;
    }

    [data-theme="system"] .btn-primary:hover {
        background: var(--primary-hover);
    }

    [data-theme="system"] .btn-secondary {
        background: var(--secondary-bg);
        color: var(--text-color);
        border-color: var(--border-color);
    }

    [data-theme="system"] .btn-small {
        background: var(--input-bg);
        color: var(--text-color);
    }

    [data-theme="system"] .btn-copy {
        background: var(--primary-color);
        color: #1a1a1a;
    }

    [data-theme="system"] .theme-btn.active {
        background: var(--primary-color);
        color: #1a1a1a;
        border-color: var(--primary-color);
    }

    [data-theme="system"] .user-avatar {
        background: var(--primary-color);
        color: #1a1a1a;
    }

    [data-theme="system"] .sidebar-brand .logo-icon {
        border-color: rgba(255, 255, 255, 0.3);
    }

    [data-theme="system"] input:focus,
    [data-theme="system"] textarea:focus,
    [data-theme="system"] select:focus {
        box-shadow: 0 0 0 2px rgba(249, 250, 251, 0.1);
    }
}