/* Slate: a neutral blue-and-slate system for public and admin interfaces. */
:root {
    --accent-color: #2563eb;
    --accent-hover: #1d4ed8;
    --accent-light: #dbeafe;
    --bg-primary: #fff;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #f1f5f9;
    --text-primary: #0f172a;
    --text-secondary: #334155;
    --text-muted: #64748b;
    --border-color: #e2e8f0;
    --card-bg: #fff;
    --header-bg: rgb(255 255 255 / 92%);
    --footer-bg: #0f172a;
    --footer-text: #cbd5e1;
    --side-menu-bg: #fff;
    --input-bg: #fff;
    --input-border: #cbd5e1;
    --badge-bg: #eff6ff;
    --badge-text: #1e40af;
    --radius: 10px;
    --card-shadow: 0 1px 2px rgb(15 23 42 / 5%), 0 1px 3px rgb(15 23 42 / 4%);
    --card-shadow-hover: 0 12px 28px rgb(15 23 42 / 10%);
    --header-shadow: 0 1px 2px rgb(15 23 42 / 5%);
}

.site-header {
    background: var(--header-bg) !important;
    border-bottom: 1px solid var(--border-color) !important;
    box-shadow: var(--header-shadow) !important;
    backdrop-filter: blur(16px);
}

.site-footer {
    background: var(--footer-bg) !important;
    color: var(--footer-text) !important;
}

.post-card,
.page-card,
.comment,
.profile-card,
.eshop-product-card,
.appearance-card {
    border: 1px solid var(--border-color) !important;
    box-shadow: var(--card-shadow) !important;
}

.post-card:hover,
.eshop-product-card:hover {
    box-shadow: var(--card-shadow-hover) !important;
}

.btn-primary {
    background: var(--accent-color);
    border-color: var(--accent-color);
}

.btn-primary:hover,
.btn-primary:focus-visible {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

[data-theme='dark'] {
    --accent-color: #60a5fa;
    --accent-hover: #93c5fd;
    --accent-light: rgb(96 165 250 / 18%);
    --bg-primary: #0f172a;
    --bg-secondary: #172033;
    --bg-tertiary: #1e293b;
    --text-primary: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --border-color: #334155;
    --card-bg: #172033;
    --header-bg: rgb(15 23 42 / 92%);
    --footer-bg: #020617;
    --footer-text: #cbd5e1;
    --side-menu-bg: #172033;
    --input-bg: #0f172a;
    --input-border: #475569;
    --badge-bg: rgb(96 165 250 / 16%);
    --badge-text: #bfdbfe;
    --card-shadow: 0 1px 3px rgb(0 0 0 / 26%);
    --card-shadow-hover: 0 16px 32px rgb(0 0 0 / 32%);
    --header-shadow: 0 1px 3px rgb(0 0 0 / 28%);
}

[data-theme='dark'] .site-footer {
    border-top: 1px solid var(--border-color);
}

/* Slate admin toolbar controls in dark mode. */
[data-theme='dark'] {
    --tb-btn-bg: #172033;
    --tb-btn-border: #334155;
    --tb-btn-color: #cbd5e1;
    --tb-btn-hover-bg: #1e293b;
    --tb-btn-hover-border: #60a5fa;
    --tb-btn-hover-color: #f8fafc;
}

[data-theme='dark'] .admin-topbar .admin-tb-btn,
[data-theme='dark'] .admin-topbar .admin-tb-icon,
[data-theme='dark'] .admin-topbar .admin-site-status {
    background: var(--tb-btn-bg);
    border-color: var(--tb-btn-border);
    color: var(--tb-btn-color);
}

[data-theme='dark'] .admin-topbar .admin-tb-btn:hover,
[data-theme='dark'] .admin-topbar .admin-tb-btn:focus-visible,
[data-theme='dark'] .admin-topbar .admin-tb-icon:hover,
[data-theme='dark'] .admin-topbar .admin-tb-icon:focus-visible,
[data-theme='dark'] .admin-topbar .admin-site-status:hover {
    background: var(--tb-btn-hover-bg);
    border-color: var(--tb-btn-hover-border);
    color: var(--tb-btn-hover-color);
    box-shadow: 0 2px 8px rgb(0 0 0 / 40%);
}

[data-theme='dark'] .admin-topbar .admin-tb-btn.active {
    background: var(--accent-light);
    border-color: var(--accent-color);
    color: var(--accent-color);
}

[data-theme='dark'] .admin-topbar .admin-tb-btn--accent {
    background: #2563eb;
    border-color: #3b82f6;
    color: #fff;
}

[data-theme='dark'] .admin-topbar .admin-tb-btn--accent:hover,
[data-theme='dark'] .admin-topbar .admin-tb-btn--accent:focus-visible {
    background: #3b82f6;
    border-color: #60a5fa;
    color: #fff;
}

[data-theme='dark'] .admin-topbar .admin-tb-btn--cmdpal {
    background: var(--tb-btn-bg) !important;
    border-color: var(--tb-btn-border) !important;
    color: var(--tb-btn-color) !important;
}

[data-theme='dark'] .admin-topbar .admin-tb-btn--cmdpal:hover,
[data-theme='dark'] .admin-topbar .admin-tb-btn--cmdpal:focus-within {
    background: var(--tb-btn-hover-bg) !important;
    border-color: var(--tb-btn-hover-border) !important;
    color: var(--tb-btn-hover-color) !important;
    box-shadow: 0 2px 8px rgb(0 0 0 / 40%);
}

[data-theme='dark'] .admin-tb-btn--cmdpal .cmdpal-trigger-input,
[data-theme='dark'] .admin-tb-btn--cmdpal kbd {
    color: var(--tb-btn-color);
}

[data-theme='dark'] .admin-tb-btn--cmdpal .cmdpal-trigger-input::placeholder {
    color: #94a3b8;
}

[data-theme='dark'] .admin-tb-btn--cmdpal kbd {
    background: rgb(255 255 255 / 8%);
    border-color: var(--tb-btn-border);
}