/**
 * Lunar New Year skin — red & gold, festive.
 * Applied when html has data-skin="lunar".
 */

/* === Variables (dark / default) === */
html[data-skin="lunar"] {
    --bg: #1a0505;
    --surface: #2d0a0a;
    --border: #5c2020;
    --text: #f5e6e6;
    --muted: #b89090;
    --accent: #e8c547;
    --accent-dim: rgba(232, 197, 71, 0.18);
    --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(232, 197, 71, 0.08);
}

html[data-skin="lunar"][data-bs-theme="light"] {
    --bg: #fff8e7;
    --surface: #fffbf0;
    --border: #d4a574;
    --text: #2d1f1f;
    --muted: #8b6914;
    --accent: #b52a2a;
    --accent-dim: rgba(181, 42, 42, 0.12);
    --shadow-card: 0 8px 24px rgba(181, 42, 42, 0.08), 0 0 0 1px rgba(212, 165, 116, 0.2);
}

/* === Background: subtle diagonal “lucky” pattern instead of grid === */
html[data-skin="lunar"] body::before {
    background-image:
        repeating-linear-gradient(
            120deg,
            transparent,
            transparent 40px,
            var(--border) 40px,
            var(--border) 41px
        ),
        repeating-linear-gradient(
            60deg,
            transparent,
            transparent 40px,
            var(--border) 40px,
            var(--border) 41px
        );
    background-size: auto;
    opacity: 0.2;
}

html[data-skin="lunar"][data-bs-theme="light"] body::before {
    opacity: 0.35;
}

/* === Card: gold top bar (like a banner) === */
html[data-skin="lunar"] .main-container::after {
    height: 4px;
    background: linear-gradient(90deg, var(--accent) 0%, #c9a227 50%, var(--accent) 100%);
}

html[data-skin="lunar"][data-bs-theme="light"] .main-container::after {
    background: linear-gradient(90deg, var(--accent) 0%, #8b0000 50%, var(--accent) 100%);
}

/* === Softer radius for lunar feel === */
html[data-skin="lunar"] .main-container {
    border-radius: 16px;
}

html[data-skin="lunar"] .navbar-logo,
html[data-skin="lunar"] .dark-mode-toggle,
html[data-skin="lunar"] #autocomplete,
html[data-skin="lunar"] .modern-checkbox,
html[data-skin="lunar"] .btn,
html[data-skin="lunar"] .content-card,
html[data-skin="lunar"] .action-group .action-btn,
html[data-skin="lunar"] .action-group .btn {
    border-radius: 10px;
}
html[data-skin="lunar"] .action-group__nav {
    border-radius: 12px;
}

/* === Primary button: gold in dark, red in light === */
html[data-skin="lunar"] .btn-primary {
    color: #1a0505;
}

html[data-skin="lunar"][data-bs-theme="light"] .btn-primary {
    color: #fff;
}

/* === Dark mode toggle hover === */
html[data-skin="lunar"] .dark-mode-toggle:hover {
    color: #1a0505;
}

html[data-skin="lunar"][data-bs-theme="light"] .dark-mode-toggle:hover {
    color: #fff;
}

/* === Word title: gold in dark, red in light === */
html[data-skin="lunar"] .word-title {
    color: var(--accent);
}

/* === Countdown / type badge === */
html[data-skin="lunar"] #countdown-wrapper,
html[data-skin="lunar"] .type-badge {
    border-color: var(--accent);
}

/* === Control buttons: info = accent === */
html[data-skin="lunar"] .controls-wrapper .btn-info {
    color: #1a0505;
}

html[data-skin="lunar"][data-bs-theme="light"] .controls-wrapper .btn-info {
    color: #fff;
}

/* === List All Data & Favorites buttons (lunar) === */
html[data-skin="lunar"] .btn-list-fav:hover {
    color: #1a0505;
}

html[data-skin="lunar"][data-bs-theme="light"] .btn-list-fav:hover {
    color: #fff;
}