/**
 * Dark Mode Styles
 * 深色模式支持 - 欧美用户高频需求
 */

/* ────────────────────────────────────────────────────────
                    DARK MODE VARIABLES
   ──────────────────────────────────────────────────────── */

:root {
    /* Light mode variables */
    --bg-primary: #F4F5F7;
    --bg-secondary: #FFFFFF;
    --bg-tertiary: #EEF2F8;
    --border-color: #DDE1E7;
    --text-primary: #1E2D3D;
    --text-secondary: #6B7A8D;
    --text-muted: #9CA3AF;
    --accent-primary: #4A6FA5;
    --accent-secondary: #8FA8C8;
    --success: #6B9E7E;
    --warning: #B8956A;
    --error: #D9775A;
    --card-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.dark {
    /* Dark mode variables */
    --bg-primary: #0F172A;
    --bg-secondary: #1E293B;
    --bg-tertiary: #334155;
    --border-color: #475569;
    --text-primary: #F1F5F9;
    --text-secondary: #94A3B8;
    --text-muted: #64748B;
    --accent-primary: #60A5FA;
    --accent-secondary: #93C5FD;
    --success: #4ADE80;
    --warning: #FBBD23;
    --error: #F87171;
    --card-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* ────────────────────────────────────────────────────────
                    DARK MODE BASE STYLES
   ──────────────────────────────────────────────────────── */

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Cards */
.card {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    box-shadow: var(--card-shadow);
}

.card:hover {
    border-color: var(--accent-primary);
}

/* Buttons */
.btn-primary {
    background-color: var(--accent-primary);
}

.btn-primary:hover {
    background-color: color-mix(in srgb, var(--accent-primary) 90%, black);
}

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

.btn-secondary:hover {
    background-color: var(--bg-tertiary);
}

.btn-ghost {
    color: var(--text-secondary);
}

.btn-ghost:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

/* Inputs */
input, select, textarea {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

input:focus, select:focus, textarea:focus {
    border-color: var(--accent-primary);
}

/* Navigation */
nav {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

/* Links */
a {
    color: var(--accent-primary);
}

a:hover {
    color: var(--accent-secondary);
}

/* ────────────────────────────────────────────────────────
                    PUZZLE BOARD STYLES
   ──────────────────────────────────────────────────────── */

/* Crossword grid */
.crossword-cell {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

.crossword-cell.selected {
    background-color: color-mix(in srgb, var(--accent-primary) 20%, transparent);
}

.crossword-cell.filled {
    color: var(--text-primary);
}

.crossword-cell.error {
    background-color: color-mix(in srgb, var(--error) 20%, transparent);
}

/* Sudoku grid */
.sudoku-cell {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

.sudoku-cell.highlighted {
    background-color: color-mix(in srgb, var(--accent-primary) 15%, transparent);
}

.sudoku-cell.given {
    color: var(--text-primary);
}

.sudoku-cell.user-input {
    color: var(--accent-primary);
}

/* Memory match cards */
.memory-card {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

.memory-card:hover:not(.matched) {
    border-color: var(--accent-primary);
}

.memory-card.matched {
    background-color: color-mix(in srgb, var(--success) 20%, transparent);
    border-color: var(--success);
}

/* ────────────────────────────────────────────────────────
                    STREAK CALENDAR STYLES
   ──────────────────────────────────────────────────────── */

.streak-calendar {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

.calendar-day {
    color: var(--text-secondary);
}

.calendar-day.today {
    background-color: var(--accent-primary);
    color: white;
}

.calendar-day.checked-in {
    background-color: var(--success);
    color: white;
}

.calendar-day.in-progress {
    background-color: var(--warning);
    color: white;
}

.calendar-day.future {
    opacity: 0.4;
}

/* ────────────────────────────────────────────────────────
                    BADGE STYLES
   ──────────────────────────────────────────────────────── */

.badge-item {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
}

.badge-item.earned {
    border-color: var(--success);
}

.badge-item.locked {
    opacity: 0.5;
    filter: grayscale(100%);
}

/* ────────────────────────────────────────────────────────
                    LEADERBOARD STYLES
   ──────────────────────────────────────────────────────── */

.leaderboard-item {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

.leaderboard-item:hover {
    background-color: var(--bg-tertiary);
}

.leaderboard-rank {
    color: var(--text-muted);
}

.leaderboard-rank.top-three {
    color: var(--warning);
}

/* ────────────────────────────────────────────────────────
                    MODAL STYLES
   ──────────────────────────────────────────────────────── */

.modal-overlay {
    background-color: rgba(0, 0, 0, 0.6);
}

.modal-content {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
}

/* ────────────────────────────────────────────────────────
                    HINT SYSTEM STYLES
   ──────────────────────────────────────────────────────── */

.hint-card {
    background-color: var(--bg-secondary);
}

.hint-card-header {
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
}

.hint-text {
    color: var(--text-primary);
}

.report-modal {
    background-color: var(--bg-secondary);
}

/* ────────────────────────────────────────────────────────
                    DARK MODE TOGGLE
   ──────────────────────────────────────────────────────── */

#dm-dark-toggle {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
}

#dm-dark-toggle:hover {
    background-color: color-mix(in srgb, var(--bg-tertiary) 80%, var(--text-muted));
}

/* ────────────────────────────────────────────────────────
                    ANIMATIONS
   ──────────────────────────────────────────────────────── */

/* Smooth transition for all interactive elements */
* {
    transition-property: background-color, border-color, color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}