/*
   MH Manager theme palette
   Change colors here first. Page CSS should use these variables instead of
   hard-coded white/light colors.
*/

:root,
:root[data-theme="dark"] {
    color-scheme: dark;
    --bs-body-bg: var(--rm-page-bg);
    --bs-body-color: var(--rm-copy);
    --bs-link-color: var(--rm-accent-2);
    --bs-link-hover-color: var(--rm-accent);
    --bs-border-color: var(--rm-line);
    --bs-secondary-color: var(--rm-copy-muted);
    --bs-tertiary-color: var(--rm-copy-soft);
    --rm-bg: var(--rm-page-bg);
    --rm-bg-soft: var(--rm-surface-2);
    --rm-card: var(--rm-surface);
    --rm-card-deep: var(--rm-surface-3);
    --rm-card-raised: var(--rm-surface-hover);
    --rm-border: var(--rm-line);
    --rm-border-strong: var(--rm-line-strong);
    --rm-text: var(--rm-copy);
    --rm-muted: var(--rm-copy-muted);
    --rm-muted-2: var(--rm-copy-soft);
    --rm-mint: var(--rm-accent);
    --rm-blue: var(--rm-accent-2);
    --rm-gold: var(--rm-warning);
    --rm-pink: #f0b9e8;
    --rm-page-bg: #121316;
    --rm-page-gradient: radial-gradient(circle at 16% 10%, rgba(45, 212, 191, 0.1), transparent 25%), radial-gradient(circle at 86% 8%, rgba(56, 189, 248, 0.1), transparent 22%), linear-gradient(135deg, #121316 0%, #1a1b20 46%, #23242a 100%);
    --rm-surface: #202126;
    --rm-surface-2: #191a1f;
    --rm-surface-3: #141519;
    --rm-surface-hover: #2a2b31;
    --rm-input: #17181d;
    --rm-input-border: rgba(45, 212, 191, 0.16);
    --rm-line: rgba(148, 163, 184, 0.16);
    --rm-line-strong: rgba(45, 212, 191, 0.35);
    --rm-copy: #f8fafc;
    --rm-copy-soft: #d6deeb;
    --rm-copy-muted: #93a4ba;
    --rm-accent: #2dd4bf;
    --rm-accent-2: #38bdf8;
    --rm-accent-on: #111827;
    --rm-success: #34d399;
    --rm-success-soft: rgba(52, 211, 153, 0.13);
    --rm-danger: #fb7185;
    --rm-danger-soft: rgba(251, 113, 133, 0.15);
    --rm-warning: #fbbf24;
    --rm-warning-soft: rgba(251, 191, 36, 0.16);
    --rm-shadow: 0 24px 64px rgba(0, 0, 0, 0.34);
    --rm-shadow-soft: 0 12px 30px rgba(0, 0, 0, 0.22);
    --rm-focus-ring: rgba(45, 212, 191, 0.32);
}

:root[data-theme="light"] {
    color-scheme: light;
    --bs-body-bg: var(--rm-page-bg);
    --bs-body-color: var(--rm-copy);
    --bs-link-color: var(--rm-accent-2);
    --bs-link-hover-color: var(--rm-accent);
    --bs-border-color: var(--rm-line);
    --bs-secondary-color: var(--rm-copy-muted);
    --bs-tertiary-color: var(--rm-copy-soft);
    --rm-bg: var(--rm-page-bg);
    --rm-bg-soft: var(--rm-surface-2);
    --rm-card: var(--rm-surface);
    --rm-card-deep: var(--rm-surface-3);
    --rm-card-raised: var(--rm-surface-hover);
    --rm-border: var(--rm-line);
    --rm-border-strong: var(--rm-line-strong);
    --rm-text: var(--rm-copy);
    --rm-muted: var(--rm-copy-muted);
    --rm-muted-2: var(--rm-copy-soft);
    --rm-mint: var(--rm-accent);
    --rm-blue: var(--rm-accent-2);
    --rm-gold: var(--rm-warning);
    --rm-pink: #f0b9e8;
    --rm-page-bg: #eef3f9;
    --rm-page-gradient: linear-gradient(180deg, #eef3f9 0%, #f8fbff 100%);
    --rm-surface: #ffffff;
    --rm-surface-2: #f7faff;
    --rm-surface-3: #edf3fb;
    --rm-surface-hover: #eef6ff;
    --rm-input: #ffffff;
    --rm-input-border: rgba(82, 111, 148, 0.22);
    --rm-line: rgba(82, 111, 148, 0.18);
    --rm-line-strong: rgba(15, 118, 110, 0.24);
    --rm-copy: #14263d;
    --rm-copy-soft: #405674;
    --rm-copy-muted: #657890;
    --rm-accent: #0f766e;
    --rm-accent-2: #0369a1;
    --rm-accent-on: #ffffff;
    --rm-success: #0f9f58;
    --rm-success-soft: rgba(15, 159, 88, 0.11);
    --rm-danger: #dc2626;
    --rm-danger-soft: rgba(220, 38, 38, 0.1);
    --rm-warning: #d97706;
    --rm-warning-soft: rgba(217, 119, 6, 0.11);
    --rm-shadow: 0 22px 58px rgba(71, 98, 154, 0.12);
    --rm-shadow-soft: 0 10px 26px rgba(15, 23, 42, 0.05);
    --rm-focus-ring: rgba(15, 118, 110, 0.24);
}

html,
body {
    background: var(--rm-page-bg) !important;
    color: var(--rm-copy) !important;
}

body {
    margin: 0;
}

a,
.btn-link {
    color: var(--rm-accent-2);
}

.btn-primary {
    color: var(--rm-accent-on);
    background: linear-gradient(135deg, var(--rm-accent) 0%, var(--rm-accent-2) 100%);
    border-color: transparent;
    box-shadow: 0 12px 24px rgba(87, 120, 255, 0.24);
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem var(--rm-surface), 0 0 0 0.25rem var(--rm-focus-ring);
}

input,
select,
textarea,
.form-control,
.form-select {
    background: var(--rm-input);
    border-color: var(--rm-input-border);
    color: var(--rm-copy);
}

input::placeholder,
select::placeholder,
textarea::placeholder,
.form-control::placeholder {
    color: var(--rm-copy-muted);
}

::selection {
    background: var(--rm-accent);
    color: var(--rm-accent-on);
}

.content :is(.prompts-page, .prompts-page *) {
    scrollbar-color: var(--rm-copy-muted) var(--rm-surface-3);
}

.content .prompts-page :is(
    .rail-card,
    .filter-card,
    .editor-card,
    .prompt-card,
    .inline-create,
    .prompt-body
) {
    border-color: var(--rm-line) !important;
    background: linear-gradient(145deg, var(--rm-surface), var(--rm-surface-2)) !important;
    color: var(--rm-copy) !important;
    box-shadow: var(--rm-shadow-soft) !important;
}

.content .prompts-page :is(.rail-title, .filter-head, .editor-head, .prompt-body) {
    border-color: var(--rm-line) !important;
}

.content .prompts-page .section-group-head {
    border-color: var(--rm-line) !important;
    border-left-color: var(--rm-accent) !important;
    background: linear-gradient(145deg, rgba(169, 231, 222, 0.14), var(--rm-surface-2)) !important;
    color: var(--rm-copy) !important;
    box-shadow: none !important;
}

.content .prompts-page :is(
    .rail-title strong,
    .filter-head strong,
    .editor-head strong,
    .selector-block label,
    .editor-block label,
    .section-group-head strong,
    .prompt-summary strong
) {
    color: var(--rm-copy) !important;
}

.content .prompts-page :is(
    .rail-summary,
    .filter-summary,
    .editor-subtitle,
    .section-group-subtitle,
    .prompt-summary span,
    .prompt-preview
) {
    color: var(--rm-copy-muted) !important;
}

.content .prompts-page .rail-chip {
    border-color: var(--rm-line) !important;
    background: var(--rm-surface-3) !important;
    color: var(--rm-copy-soft) !important;
}

.content .prompts-page .rail-chip.active {
    border-color: var(--rm-line-strong) !important;
    background: var(--rm-accent) !important;
    color: var(--rm-accent-on) !important;
}

.content .prompts-page .prompt-card summary:hover,
.content .prompts-page .prompt-card[open] summary {
    background: var(--rm-surface-hover) !important;
    color: var(--rm-copy) !important;
}

.content .prompts-page :is(input, select, textarea, .form-control, .form-select, .rail-search, .prompt-textarea) {
    border-color: var(--rm-input-border) !important;
    background: var(--rm-input) !important;
    color: var(--rm-copy) !important;
}

.content .prompts-page :is(input, select, textarea, .form-control, .form-select)::placeholder {
    color: var(--rm-copy-muted) !important;
}

.content .prompts-page :is(.btn, button) {
    border-color: var(--rm-line) !important;
    background: var(--rm-surface-3) !important;
    color: var(--rm-copy-soft) !important;
}

.content .prompts-page :is(.btn-primary, button[type="submit"]) {
    border-color: transparent !important;
    background: var(--rm-accent) !important;
    color: var(--rm-accent-on) !important;
}