/**
 * Article — dark mode
 * Overrides --ar-* tokens + light surfaces hardcoded in articles.css
 */

html[data-hh-ct-dark-mode="dark"],
body.hh-ct-dark {
    --ar-ink: #e8eef3;
    --ar-muted: #9aabba;
    --ar-accent: #5eb0d8;
    --ar-accent-soft: rgba(94, 176, 216, 0.16);
    --ar-surface: #151b21;
    --ar-card: #1e262e;
    --ar-line: #3a4654;
    --ar-vip: #e0b060;
    --ar-featured: #e8c547;
    --ar-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 28px rgba(0, 0, 0, 0.4);
}

body.hh-ct-dark .ar-page {
    background: var(--ar-surface);
    color: var(--ar-ink);
}

body.hh-ct-dark .ar-card,
body.hh-ct-dark .ar-hub-panel,
body.hh-ct-dark .ar-filters,
body.hh-ct-dark .ar-detail,
body.hh-ct-dark .ar-empty {
    background: var(--ar-card) !important;
    border-color: var(--ar-line) !important;
    color: var(--ar-ink);
    box-shadow: var(--ar-shadow);
}

body.hh-ct-dark .ar-btn-ghost,
body.hh-ct-dark .ar-btn-secondary {
    background: #28323c !important;
    color: var(--ar-ink) !important;
    border-color: var(--ar-line) !important;
}

body.hh-ct-dark .ar-btn-primary {
    background: var(--ar-accent) !important;
    color: #0d1a24 !important;
}

body.hh-ct-dark .ar-tabs a,
body.hh-ct-dark .ar-filter-pill {
    background: var(--ar-card) !important;
    border-color: var(--ar-line) !important;
    color: var(--ar-ink) !important;
}

body.hh-ct-dark .ar-tabs a.is-active,
body.hh-ct-dark .ar-filter-pill.is-active {
    background: var(--ar-accent-soft) !important;
    border-color: var(--ar-accent) !important;
    color: var(--ar-accent) !important;
}

body.hh-ct-dark .ar-card__title,
body.hh-ct-dark .ar-section-title,
body.hh-ct-dark .ar-detail__title,
body.hh-ct-dark .ar-hub-head h2 {
    color: var(--ar-ink) !important;
}

body.hh-ct-dark .ar-card__excerpt,
body.hh-ct-dark .ar-section-sub,
body.hh-ct-dark .ar-card__meta,
body.hh-ct-dark .ar-muted {
    color: var(--ar-muted) !important;
}

body.hh-ct-dark .ar-chip,
body.hh-ct-dark .ar-tag {
    background: #28323c !important;
    color: #c8d1da !important;
    border-color: var(--ar-line) !important;
}

body.hh-ct-dark .ar-chip--vip,
body.hh-ct-dark .ar-badge-vip {
    background: rgba(224, 176, 96, 0.18) !important;
    color: var(--ar-vip) !important;
}

body.hh-ct-dark .ar-chip--featured,
body.hh-ct-dark .ar-badge-featured {
    background: rgba(232, 197, 71, 0.16) !important;
    color: var(--ar-featured) !important;
}

body.hh-ct-dark .ar-page .form-control,
body.hh-ct-dark .ar-page select,
body.hh-ct-dark .ar-page textarea {
    background-color: #171d24 !important;
    border-color: #404d5c !important;
    color: #eef2f6 !important;
}

body.hh-ct-dark .ar-page .panel,
body.hh-ct-dark .ar-page .panel-default,
body.hh-ct-dark .ar-page .panel-body,
body.hh-ct-dark .ar-page .panel-heading {
    background-color: var(--ar-card) !important;
    border-color: var(--ar-line) !important;
    color: var(--ar-ink);
}

body.hh-ct-dark .ar-page .text-muted {
    color: var(--ar-muted) !important;
}

body.hh-ct-dark .ar-page a:not(.btn):not(.ar-btn) {
    color: var(--ar-accent);
}

body.hh-ct-dark .ar-progress,
body.hh-ct-dark .ar-load-more {
    background: #232c35 !important;
    border-color: var(--ar-line);
}

body.hh-ct-dark .ar-detail__body,
body.hh-ct-dark .ar-content {
    color: var(--ar-ink);
}

body.hh-ct-dark .ar-detail__body img,
body.hh-ct-dark .ar-card__cover {
    border-color: var(--ar-line);
}