/*
 * Neiki's Ultimate Dark Theme for neiki-cms
 * Version: 1.0.0
 *
 * Dark-only premium theme from the unified "Ultimate" design system:
 * deep indigo-slate night surfaces (hue ~226), lit-but-calm state colors,
 * bright indigo accents and WCAG AA contrast. Shares its color families
 * with Neiki's Ultimate Light.
 */

:root,
[data-theme='dark'] {
    /* ── Ultimate dark palette ────────────────────────────────────── */
    --ult-bg-primary: #0d1017;
    --ult-bg-secondary: #11141c;
    --ult-surface: #141824;
    --ult-surface-hover: #191e2c;
    --ult-surface-active: #1e2434;
    --ult-surface-elevated: #1a2030;
    --ult-surface-overlay: #202739;
    --ult-surface-inset: #0a0d14;
    --ult-header-bg: #10131c;
    --ult-footer-bg: #0a0c12;
    --ult-footer-text: #8c94a9;
    --ult-text-primary: #e8eaf2;
    --ult-text-secondary: #acb3c6;
    --ult-text-muted: #8c94a9;
    --ult-text-disabled: #5c6478;
    --ult-text-on-accent: #0d1017;
    --ult-border-subtle: #202635;
    --ult-border-default: #2a3143;
    --ult-border-strong: #3a4358;
    --ult-accent: #7c93f7;
    --ult-accent-hover: #9fb2f9;
    --ult-accent-light: rgb(124 147 247 / 14%);
    --ult-accent-solid: #6480f0;
    --ult-accent-solid-hover: #7c93f7;
    --ult-accent-solid-active: #5872ef;
    --ult-secondary: #7ed4c4;
    --ult-secondary-light: rgb(126 212 196 / 12%);
    --ult-state-selected-bg: #202948;
    --ult-state-selected-text: #c6d1fb;
    --ult-success: #47cd8e;
    --ult-success-bg: #14291e;
    --ult-success-text: #a9ebbf;
    --ult-warning: #e8b54b;
    --ult-warning-bg: #2b2310;
    --ult-warning-text: #f5dc9e;
    --ult-error: #ee6e83;
    --ult-error-bg: #32181e;
    --ult-error-text: #f7b3bf;
    --ult-info: #58b3e2;
    --ult-info-bg: #122833;
    --ult-info-text: #a9d9f1;
    --ult-input-bg: #0c0f17;
    --ult-input-border: #2b3246;
    --ult-badge-bg: #252c41;
    --ult-badge-text: #b7bfd4;
    --ult-table-header-bg: #10131c;
    --ult-table-zebra: #161b29;
    --ult-scrollbar-thumb: #2c3348;
    --ult-shadow-card: 0 1px 2px rgb(0 0 0 / 35%), 0 4px 12px rgb(0 0 0 / 28%);
    --ult-shadow-card-hover: 0 6px 20px rgb(0 0 0 / 42%);
    --ult-shadow-overlay: 0 8px 30px rgb(0 0 0 / 50%);
    --ult-shadow-header: 0 1px 3px rgb(0 0 0 / 30%);

    /* ── CMS design tokens (palette §7 mapping) ───────────────────── */
    --bg-primary: var(--ult-bg-primary);
    --bg-secondary: var(--ult-bg-secondary);
    --bg-tertiary: var(--ult-surface-elevated);
    --text-primary: var(--ult-text-primary);
    --text-secondary: var(--ult-text-secondary);
    --text-muted: var(--ult-text-muted);
    --border-color: var(--ult-border-default);
    --accent-color: var(--ult-accent);
    --accent-hover: var(--ult-accent-hover);
    --accent-light: var(--ult-accent-light);
    --card-bg: var(--ult-surface);
    --card-shadow: var(--ult-shadow-card);
    --card-shadow-hover: var(--ult-shadow-card-hover);
    --header-bg: rgb(16 19 28 / 92%);
    --header-shadow: var(--ult-shadow-header);
    --footer-bg: var(--ult-footer-bg);
    --footer-text: var(--ult-footer-text);
    --overlay-bg: rgb(6 8 14 / 66%);
    --side-menu-bg: var(--ult-header-bg);
    --alert-success-bg: var(--ult-success-bg);
    --alert-success-text: var(--ult-success-text);
    --alert-error-bg: var(--ult-error-bg);
    --alert-error-text: var(--ult-error-text);
    --alert-info-bg: var(--ult-info-bg);
    --alert-info-text: var(--ult-info-text);
    --alert-warning-bg: var(--ult-warning-bg);
    --alert-warning-text: var(--ult-warning-text);
    --input-bg: var(--ult-input-bg);
    --input-border: var(--ult-input-border);
    --input-focus-border: var(--ult-accent);
    --badge-bg: var(--ult-badge-bg);
    --badge-text: var(--ult-badge-text);
    --radius: 12px;

    /* ── Admin UI tokens ──────────────────────────────────────────── */
    --admin-surface: var(--ult-surface);
    --admin-surface-hover: var(--ult-surface-hover);
    --admin-surface-active: var(--ult-surface-active);
    --admin-border: var(--ult-border-default);
    --admin-border-strong: var(--ult-border-strong);
    --focus-ring: 0 0 0 3px rgb(124 147 247 / 40%);
    --danger-color: var(--ult-error);
    --danger-hover: #f38c9d;
    --danger-light: rgb(238 110 131 / 14%);
    --success-color: var(--ult-success);
    --success-light: rgb(71 205 142 / 14%);
    --warning-color: var(--ult-warning);
    --warning-light: rgb(232 181 75 / 14%);
}

html {
    color-scheme: dark;
}

::selection {
    background: rgb(124 147 247 / 30%);
    color: #e8eaf2;
}

/* ── Header, footer and cards ─────────────────────────────────────── */
.site-header {
    background: var(--header-bg) !important;
    border-bottom: 1px solid var(--ult-border-subtle) !important;
    box-shadow: var(--header-shadow) !important;
    backdrop-filter: blur(16px);
}

.site-footer {
    background: var(--footer-bg) !important;
    border-top: 1px solid var(--ult-border-subtle);
    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;
}

/* ── Buttons: solid accents carry dark text (palette §3.8) ────────── */
.btn-primary {
    background-color: var(--ult-accent-solid);
    color: var(--ult-text-on-accent);
}

.btn-primary:hover,
.btn-primary:focus-visible {
    background-color: var(--ult-accent-solid-hover);
    color: var(--ult-text-on-accent);
}

.btn-primary:active {
    background-color: var(--ult-accent-solid-active);
}

.btn-primary .icon-img {
    filter: brightness(0);
}

.btn-primary .icon-img.icon-default {
    filter: none;
}

.btn-danger {
    background-color: var(--danger-color);
    color: var(--ult-text-on-accent);
}

.btn-danger:hover,
.btn-danger:focus-visible {
    background-color: var(--danger-hover);
    color: var(--ult-text-on-accent);
}

.btn-danger .icon-img {
    filter: brightness(0);
}

.btn-danger .icon-img.icon-default {
    filter: none;
}

/* Keep the accent toolbar button readable (dark text on solid accent). */
.admin-topbar .admin-tb-btn--accent {
    background: var(--ult-accent-solid) !important;
    border-color: var(--ult-accent-solid) !important;
    color: var(--ult-text-on-accent) !important;
}

.admin-topbar .admin-tb-btn--accent:hover,
.admin-topbar .admin-tb-btn--accent:focus-visible {
    background: var(--ult-accent-solid-hover) !important;
    border-color: var(--ult-accent-solid-hover) !important;
    color: var(--ult-text-on-accent) !important;
}

/* ── Scrollbars (palette §3.10) ───────────────────────────────────── */
html[data-theme='dark'] ::-webkit-scrollbar-track,
html[data-theme='dark'] ::-webkit-scrollbar-corner {
    background: var(--ult-bg-secondary);
}

html[data-theme='dark'] ::-webkit-scrollbar-thumb {
    background: var(--ult-scrollbar-thumb);
}

html[data-theme='dark'] ::-webkit-scrollbar-thumb:hover {
    background: var(--ult-border-strong);
}

html[data-theme='dark'] * {
    scrollbar-color: var(--ult-scrollbar-thumb) var(--ult-bg-secondary);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition: none !important;
    }
}