/* Theme tokens */
:root {
    /* Light mode (default for CSS, dark applied via data-theme) */
    --bg-base: #f8fafc;
    --bg-surface: #ffffff;
    --bg-elevated: #f1f5f9;
    --border: #e2e8f0;

    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --text-disabled: #cbd5e1;

    --accent-primary: #2563eb;
    --accent-primary-light: #3b82f6;
    --accent-primary-text: #1d4ed8;
    --accent-success: #15803d;
    --accent-success-text: #15803d;
    --accent-warning: #b45309;
    --accent-warning-text: #92400e;
    --accent-danger: #dc2626;
    --accent-danger-text: #dc2626;
    --accent-violet: #7c3aed;
    --accent-violet-text: #6d28d9;
    --accent-cyan: #0891b2;
    --accent-cyan-text: #0e7490;

    /* Tinted backgrounds for badges/soft buttons */
    --tint-success: #dcfce7;
    --tint-warning: #fef3c7;
    --tint-danger: #fef2f2;
    --tint-primary: #dbeafe;
    --tint-violet: #ede9fe;
    --tint-cyan: #ecfeff;

    /* Badge text (darker for light mode contrast) */
    --badge-success-text: #166534;
    --badge-warning-text: #92400e;
    --badge-danger-text: #991b1b;
    --badge-primary-text: #1e40af;
    --badge-violet-text: #5b21b6;

    /* Feedback backgrounds (lighter tints than badge tints per spec) */
    --feedback-info-bg: #ecfeff;
    --feedback-success-bg: #f0fdf4;
    --feedback-warning-bg: #fffbeb;
    --feedback-error-bg: #fef2f2;

    /* Feedback text */
    --feedback-info-text: #155e75;
    --feedback-success-text: #166534;
    --feedback-warning-text: #92400e;
    --feedback-error-text: #991b1b;
}

[data-theme="dark"] {
    --bg-base: #0d0f12;
    --bg-surface: #151720;
    --bg-elevated: #1e2028;
    --border: #2d3039;

    --text-primary: #f3f4f6;
    --text-secondary: #9ca3af;
    --text-muted: #6b7280;
    --text-disabled: #4b5563;

    --accent-primary: #2563eb;
    --accent-primary-light: #60a5fa;
    --accent-primary-text: #60a5fa;
    --accent-success: #15803d;
    --accent-success-text: #4ade80;
    --accent-warning: #b45309;
    --accent-warning-text: #fbbf24;
    --accent-danger: #dc2626;
    --accent-danger-text: #f87171;
    --accent-violet: #7c3aed;
    --accent-violet-text: #a78bfa;
    --accent-cyan: #0891b2;
    --accent-cyan-text: #22d3ee;

    --tint-success: rgba(34, 197, 94, 0.15);
    --tint-warning: rgba(245, 158, 11, 0.15);
    --tint-danger: rgba(239, 68, 68, 0.15);
    --tint-primary: rgba(59, 130, 246, 0.15);
    --tint-violet: rgba(139, 92, 246, 0.15);
    --tint-cyan: rgba(6, 182, 212, 0.1);

    --badge-success-text: #4ade80;
    --badge-warning-text: #fbbf24;
    --badge-danger-text: #f87171;
    --badge-primary-text: #60a5fa;
    --badge-violet-text: #a78bfa;

    --feedback-info-bg: rgba(6, 182, 212, 0.1);
    --feedback-success-bg: rgba(34, 197, 94, 0.1);
    --feedback-warning-bg: rgba(245, 158, 11, 0.1);
    --feedback-error-bg: rgba(239, 68, 68, 0.1);

    --feedback-info-text: #22d3ee;
    --feedback-success-text: #4ade80;
    --feedback-warning-text: #fbbf24;
    --feedback-error-text: #f87171;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    overflow-y: scroll; /* Always show scrollbar to prevent layout shift on theme switch */
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    background-color: var(--bg-base);
    color: var(--text-primary);
    line-height: 1.6;
}

/* Code bracket highlighting — !important to override :hover pseudo-class on hovered bracket */
.code-highlight,
.code-highlight:hover {
    background-color: rgba(37, 99, 235, 0.1) !important;
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.25);
}
[data-theme="dark"] .code-highlight,
[data-theme="dark"] .code-highlight:hover {
    background-color: rgba(251, 191, 36, 0.25) !important;
    box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.35);
}

/* Status dropdown: color the trigger but reset options to neutral */
.status-dropdown option {
    background-color: var(--bg-surface);
    color: var(--text-primary);
}

/* Code token hover (clickable keywords, strings, brackets) */
.code-token-hover:hover {
    background-color: var(--bg-elevated);
}
[data-theme="dark"] .code-token-hover:hover {
    background-color: rgba(251, 191, 36, 0.25);
}

/* Scrollbar styling for both modes */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb { background: var(--bg-elevated); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--border); }

/* Selection */
::selection { background: rgba(37, 99, 235, 0.3); color: var(--text-primary); }

/* Markdown Preview */
.markdown-preview {
    color: var(--text-primary);
    line-height: 1.7;
    word-wrap: break-word;
}

.markdown-preview h1,
.markdown-preview h2,
.markdown-preview h3,
.markdown-preview h4,
.markdown-preview h5,
.markdown-preview h6 {
    color: var(--text-primary);
    font-weight: 600;
    margin-top: 1.25em;
    margin-bottom: 0.5em;
    line-height: 1.3;
}

.markdown-preview h1 { font-size: 1.75rem; border-bottom: 1px solid var(--border); padding-bottom: 0.3em; }
.markdown-preview h2 { font-size: 1.5rem; border-bottom: 1px solid var(--border); padding-bottom: 0.3em; }
.markdown-preview h3 { font-size: 1.25rem; }
.markdown-preview h4 { font-size: 1.1rem; }
.markdown-preview h5 { font-size: 1rem; }
.markdown-preview h6 { font-size: 0.9rem; color: var(--text-secondary); }

.markdown-preview p {
    margin-bottom: 0.75em;
}

.markdown-preview ul,
.markdown-preview ol {
    margin-bottom: 0.75em;
    padding-left: 1.75em;
}

.markdown-preview ul { list-style-type: disc; }
.markdown-preview ol { list-style-type: decimal; }

.markdown-preview li {
    margin-bottom: 0.25em;
}

.markdown-preview li > ul,
.markdown-preview li > ol {
    margin-top: 0.25em;
    margin-bottom: 0;
}

.markdown-preview a {
    color: var(--accent-primary-text);
    text-decoration: none;
}

.markdown-preview a:hover {
    text-decoration: underline;
}

.markdown-preview code {
    background-color: var(--bg-elevated);
    color: var(--text-primary);
    padding: 0.15em 0.35em;
    border-radius: 4px;
    font-size: 0.9em;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}

.markdown-preview pre {
    background-color: var(--bg-base);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 1em;
    margin-bottom: 0.75em;
    overflow-x: auto;
}

.markdown-preview pre code {
    background: none;
    padding: 0;
    border-radius: 0;
    font-size: 0.875em;
}

.markdown-preview blockquote {
    border-left: 3px solid var(--accent-primary-text);
    padding: 0.25em 1em;
    margin-bottom: 0.75em;
    color: var(--text-secondary);
    background-color: var(--bg-elevated);
    border-radius: 0 4px 4px 0;
}

.markdown-preview blockquote p:last-child {
    margin-bottom: 0;
}

.markdown-preview strong {
    color: var(--text-primary);
    font-weight: 600;
}

.markdown-preview em {
    font-style: italic;
}

.markdown-preview hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 1.5em 0;
}

.markdown-preview table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0.75em;
}

.markdown-preview th,
.markdown-preview td {
    border: 1px solid var(--border);
    padding: 0.5em 0.75em;
    text-align: left;
}

.markdown-preview th {
    background-color: var(--bg-elevated);
    color: var(--text-primary);
    font-weight: 600;
}

.markdown-preview tr:nth-child(even) {
    background-color: var(--bg-elevated);
}

.markdown-preview img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}

/* Markdown custom style markers: {red}text{/}, {big bold}text{/}, etc. */
.markdown-preview .md-red { color: var(--accent-danger-text); }
.markdown-preview .md-green { color: var(--accent-success-text); }
.markdown-preview .md-blue { color: var(--accent-primary-text); }
.markdown-preview .md-yellow { color: var(--accent-warning-text); }
.markdown-preview .md-big { font-size: 1.5em; line-height: 1.4; }
.markdown-preview .md-bold { font-weight: 700; }
.markdown-preview .md-center { display: block; text-align: center; }