/* ============================================
    中文大师 — Midnight Ocean Theme
    Coral · Lavender · Teal · Deep Navy
    ============================================ */

/* === Design Tokens === */
.theme-dark,
:root {
    /* Background hierarchy — each level visibly distinct */
    --bg-primary:    #0f172a;   /* Page — deep navy */
    --bg-secondary:  #1e293b;   /* Section / Modal bg */
    --bg-tertiary:   #334155;   /* Accent surfaces / flashcard backs */
    --bg-card:       #1e293b;   /* Cards — clearly lifted from page */
    --bg-hover:      #334155;   /* Hover states — lifted from card */
    --bg-input:      #0f172a;   /* Inputs — inset (darker than card) */

    /* Text — clean whites */
    --text-primary:    #f8fafc;  /* Pure white */
    --text-secondary:  #cbd5e1;  /* Light gray */
    --text-muted:      #94a3b8;  /* Slate gray — WCAG AA compliant */

    /* Semantic accent colors */
    --color-primary:       #f07171;   /* Darkened coral — WCAG AA with white */
    --color-primary-dark:  #e85555;
    --color-primary-light: #fca5a5;
    --color-secondary:     #a78bfa;   /* Soft lavender */
    --color-secondary-dark:#8b5cf6;
    --color-accent:        #06b6d4;   /* Bright teal */
    --color-accent-dark:   #0891b2;
    --color-success:       #10b981;   /* Mint green */
    --color-success-dark:  #059669;
    --color-warning:       #f59e0b;   /* Amber */
    --color-warning-dark:  #d97706;
    --color-danger:        #fb6882;   /* Rose */
    --color-danger-dark:   #f43f5e;
    --color-info:          #60a5fa;   /* Bright blue */
    --color-info-dark:     #3b82f6;

    /* Borders — subtle slate */
    --border-color:  rgba(148, 163, 184, 0.1);
    --border-hover:  rgba(148, 163, 184, 0.2);

    /* Gradients */
    --gradient-primary:   linear-gradient(135deg, #e85555 0%, #d94444 100%);
    --gradient-secondary: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);
    --gradient-accent:    linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
    --gradient-success:   linear-gradient(135deg, #10b981 0%, #059669 100%);
    --gradient-bg: linear-gradient(180deg, #0f172a 0%, #1e293b 40%, #334155 100%);

    /* Glass / overlay */
    --shadow-color: rgba(0, 0, 0, 0.5);
    --glass-bg:     rgba(30, 41, 59, 0.85);
    --glass-border: rgba(148, 163, 184, 0.08);

    /* Loading */
    --loading-bg:         #0f172a;
    --loading-bar-bg:     rgba(148, 163, 184, 0.1);
    --loading-progress:   var(--gradient-primary);
    --loading-char-color: var(--color-primary);
    --loading-text-color: var(--text-secondary);

    /* Navigation */
    --nav-bg:              #0c1322;
    --nav-border:          rgba(148, 163, 184, 0.08);
    --nav-link-hover:      rgba(148, 163, 184, 0.06);
    --nav-link-active-bg:  rgba(255, 107, 107, 0.12);
    --nav-link-active-color: #fca5a5;
    --nav-link-active-icon:  #ff6b6b;

    /* Components */
    --xp-bar-bg:             rgba(148, 163, 184, 0.1);
    --xp-fill-bg:            var(--gradient-secondary);
    --stats-card-bg:          var(--bg-card);
    --stats-card-border:      var(--glass-border);
    --stats-card-hover-border: var(--border-hover);
    --goal-ring-bg:           rgba(148, 163, 184, 0.1);
    --goal-ring-fill:         var(--gradient-primary);
    --goal-item-bg:           rgba(148, 163, 184, 0.05);
    --action-card-bg:          var(--bg-card);
    --action-card-border:      var(--glass-border);
    --action-card-hover-border: rgba(255, 107, 107, 0.3);
    --activity-list-bg:        var(--bg-card);
    --activity-item-border:    rgba(148, 163, 184, 0.06);
    --hero-bg:               linear-gradient(135deg, rgba(255, 107, 107, 0.08), rgba(167, 139, 250, 0.06), rgba(6, 182, 212, 0.04));
    --hero-border:           rgba(148, 163, 184, 0.08);
    --hero-metric-bg:        rgba(148, 163, 184, 0.05);
    --hero-metric-border:    rgba(148, 163, 184, 0.08);
    --weekly-bar-active:     linear-gradient(180deg, #ff6b6b, #ef4444);
    --weekly-bar-dormant:    rgba(148, 163, 184, 0.15);
    --weekly-bar-has-activity: linear-gradient(180deg, rgba(167, 139, 250, 0.7), rgba(167, 139, 250, 0.4));
    --proverb-bg:            linear-gradient(135deg, rgba(167, 139, 250, 0.08), rgba(255, 107, 107, 0.06));
    --proverb-border:        rgba(167, 139, 250, 0.15);
    --skills-pill-bg:        rgba(148, 163, 184, 0.05);
    --skills-pill-border:    rgba(148, 163, 184, 0.08);
    --exercise-type-card-bg:          var(--bg-card);
    --exercise-type-card-border:      var(--glass-border);
    --exercise-type-card-hover-border: rgba(255, 107, 107, 0.3);
    --difficulty-easy-bg:      rgba(16, 185, 129, 0.15);
    --difficulty-easy-color:   var(--color-success);
    --difficulty-medium-bg:    rgba(245, 158, 11, 0.15);
    --difficulty-medium-color: var(--color-warning);
    --difficulty-hard-bg:      rgba(244, 63, 94, 0.15);
    --difficulty-hard-color:   var(--color-danger);
    --exercise-header-border:  rgba(148, 163, 184, 0.1);
    --flashcard-front-bg:      var(--bg-card);
    --flashcard-front-border:  var(--glass-border);
    --flashcard-back-bg:       var(--bg-tertiary);
    --flashcard-back-border:   var(--glass-border);
    --matching-card-bg:         var(--bg-card);
    --matching-card-border:     var(--glass-border);
    --matching-card-hover-border: rgba(255, 107, 107, 0.3);
    --listening-option-bg:          var(--bg-card);
    --listening-option-border:      var(--glass-border);
    --listening-option-hover-border: rgba(255, 107, 107, 0.3);
    --reading-passage-bg:           var(--bg-card);
    --reading-passage-border:       var(--glass-border);
    --word-hover-bg:               rgba(148, 163, 184, 0.1);
    --grammar-pattern-bg:           var(--bg-card);
    --grammar-pattern-border:       var(--glass-border);
    --grammar-example-bg:           rgba(148, 163, 184, 0.05);
    --grammar-lesson-item-bg:       var(--bg-card);
    --grammar-lesson-item-border:   var(--glass-border);
    --grammar-lesson-item-hover-border: rgba(255, 107, 107, 0.3);
    --grammar-lesson-number-bg:     var(--color-primary);
    --achievement-card-bg:          var(--bg-card);
    --achievement-card-border:      var(--glass-border);
    --achievement-card-hover-border: rgba(167, 139, 250, 0.4);
    --achievement-locked-bg:        rgba(148, 163, 184, 0.03);
    --input-bg:            var(--bg-input);
    --input-border:        var(--border-color);
    --input-focus-border:   var(--color-primary);
    --input-correct-border: var(--color-success);
    --input-incorrect-border: var(--color-danger);
    --modal-bg:            var(--bg-secondary);
    --modal-overlay-bg:    rgba(0, 0, 0, 0.75);
    --toast-success-bg:    var(--color-success);
    --toast-error-bg:      var(--color-danger);
    --toast-info-bg:       var(--color-primary);
    --btn-secondary-bg:      rgba(148, 163, 184, 0.1);
    --btn-secondary-hover-bg: rgba(148, 163, 184, 0.18);
    --scrollbar-thumb:       rgba(148, 163, 184, 0.15);
    --scrollbar-thumb-hover: rgba(148, 163, 184, 0.25);
}

/* Apply base theme */
body, .theme-dark {
    background: var(--bg-primary);
    color: var(--text-primary);
}

/* Loading Screen */
.loading-screen { background: var(--loading-bg); }
.loading-logo .chinese-char { color: var(--loading-char-color); }
.loading-bar { background: var(--loading-bar-bg); }
.loading-progress { background: var(--loading-progress); }
.loading-text { color: var(--loading-text-color); }

/* Navigation */
.main-nav {
    background: var(--nav-bg);
    border-right: 1px solid var(--nav-border);
}
.nav-header { border-bottom-color: var(--nav-border); }
.logo-char, .logo-text { color: var(--text-primary); }
.nav-link { color: var(--text-secondary); }
.nav-link:hover { background: var(--nav-link-hover); color: var(--text-primary); }
.nav-link.active { color: var(--nav-link-active-color); background: var(--nav-link-active-bg); }
.nav-link.active .nav-icon { color: var(--nav-link-active-icon); }
.nav-link.active::before { background: var(--color-primary); }
.nav-footer { border-top-color: var(--nav-border); }
.level-badge { color: var(--text-primary); }
.xp-bar { background: var(--xp-bar-bg); }
.xp-fill { background: var(--xp-fill-bg); }
.xp-text { color: var(--text-secondary); }
.streak-display { color: var(--text-primary); }
.streak-label { color: var(--text-secondary); }

/* Main Content */
.main-content { background: var(--gradient-bg); }

/* Module Headers */
.module-header h1 { color: var(--text-primary); }
.module-subtitle { color: var(--text-secondary); }

/* Stats Cards */
.stats-card {
    background: var(--stats-card-bg);
    border: 1px solid var(--stats-card-border);
}
.stats-card:hover { border-color: var(--stats-card-hover-border); }
.stats-icon { color: var(--color-primary); }
.stats-value { color: var(--text-primary); }
.stats-label { color: var(--text-secondary); }

/* Daily Goal */
.daily-goal-section h2,
.daily-goal-section h3 { color: var(--text-primary); }
.goal-ring svg .goal-bg { stroke: var(--goal-ring-bg); }
.goal-ring svg .goal-fill { stroke: url(#goal-gradient); }
.goal-text span { color: var(--text-primary); }
.goal-item { background: var(--goal-item-bg); color: var(--text-primary); }
.goal-icon { color: var(--color-primary); }

/* Quick Actions */
.quick-actions h2 { color: var(--text-primary); }
.quick-actions h3 { color: var(--text-primary); }
.action-card { background: var(--action-card-bg); border: 1px solid var(--action-card-border); }
.action-card:hover { border-color: var(--action-card-hover-border); }
.action-icon { color: var(--color-primary); }
.action-card h3 { color: var(--text-primary); }
.action-card p { color: var(--text-secondary); }

/* Recent Activity */
.recent-activity h2,
.recent-activity h3 { color: var(--text-primary); }
.activity-list { background: var(--activity-list-bg); }
.activity-empty { color: var(--text-secondary); }
.activity-item { border-bottom-color: var(--activity-item-border); color: var(--text-primary); }
.activity-icon { color: var(--color-primary); }
.activity-time { color: var(--text-muted); }

/* Hero Banner */
.dashboard-hero { background: var(--hero-bg); border-color: var(--hero-border); }
.hero-metric { background: var(--hero-metric-bg); border-color: var(--hero-metric-border); }
.hero-level-badge { color: var(--color-primary); }
.hero-level-title { color: var(--text-secondary); }
.hero-level-bar { background: var(--hero-metric-bg); }
.hero-xp-text { color: var(--text-muted); }

/* Section Headers */
.dashboard-section-header h2 { color: var(--text-primary); }

/* Weekly Chart */
.weekly-bar.active { background: var(--weekly-bar-active); }
.weekly-bar.inactive { background: var(--weekly-bar-dormant); }
.weekly-bar.has-activity { background: var(--weekly-bar-has-activity); }
.weekly-bar-label { color: var(--text-muted); }
.weekly-bar-value { color: var(--text-secondary); }
.weekly-summary-num { color: var(--text-primary); }
.weekly-summary-label { color: var(--text-muted); }
.weekly-summary-avg { color: var(--text-secondary); }

/* Skills Overview */
.skills-overview h3 { color: var(--text-primary); }
.skills-stat-pill { background: var(--skills-pill-bg); border-color: var(--skills-pill-border); }
.skills-stat-pill .pill-value { color: var(--text-primary); }
.skills-stat-pill .pill-label { color: var(--text-muted); }

/* Proverb */
.proverb-card { background: var(--proverb-bg); border-color: var(--proverb-border); }
.proverb-chinese { color: var(--color-secondary); }
.proverb-pinyin { color: var(--text-secondary); }
.proverb-meaning { color: var(--text-muted); }

/* Exercise Type Cards */
.exercise-type-card, .vocab-mode-card, .game-card {
    background: var(--exercise-type-card-bg);
    border: 1px solid var(--exercise-type-card-border);
}
.exercise-type-card:hover, .vocab-mode-card:hover, .game-card:hover {
    border-color: var(--exercise-type-card-hover-border);
}
.type-icon, .mode-icon { color: var(--color-primary); }
.exercise-type-card h3, .vocab-mode-card h3, .game-card h3 { color: var(--text-primary); }
.exercise-type-card p, .vocab-mode-card p, .game-card p { color: var(--text-secondary); }
.type-difficulty {
    font-size: var(--font-size-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-full);
    display: inline-block;
}
.type-difficulty.easy { background: var(--difficulty-easy-bg); color: var(--difficulty-easy-color); }
.type-difficulty.medium { background: var(--difficulty-medium-bg); color: var(--difficulty-medium-color); }
.type-difficulty.medium-hard { background: var(--difficulty-hard-bg); color: var(--difficulty-hard-color); opacity: 0.85; }
.type-difficulty.hard { background: var(--difficulty-hard-bg); color: var(--difficulty-hard-color); }

/* Exercise Header */
.exercise-header { border-bottom-color: var(--exercise-header-border); }
.back-btn { color: var(--text-secondary); }
.back-btn:hover { background: var(--nav-link-hover); color: var(--text-primary); }
.exercise-title { color: var(--text-primary); }
.exercise-progress { color: var(--text-secondary); }

/* Buttons */
.btn-primary { background: var(--gradient-primary); color: white; }
.btn-primary:hover { background: var(--color-primary-dark); }
.btn-secondary { background: var(--btn-secondary-bg); color: var(--text-primary); }
.btn-secondary:hover { background: var(--btn-secondary-hover-bg); }
.btn-success { background: var(--gradient-success); color: white; }
.btn-danger { background: var(--color-danger); color: white; }

/* Flashcards */
.flashcard { background: var(--flashcard-front-bg); border: 1px solid var(--flashcard-front-border); }
.flashcard-front { background: var(--flashcard-front-bg); border: 1px solid var(--flashcard-front-border); }
.flashcard-back { background: var(--flashcard-back-bg); border: 1px solid var(--flashcard-back-border); }
.flashcard-character { color: var(--text-primary); }
.flashcard-pinyin { color: var(--text-secondary); }
.flashcard-meaning { color: var(--text-primary); }
.example-cn { color: var(--text-primary); }
.example-en { color: var(--text-secondary); }
.flashcard-counter { color: var(--text-secondary); }

/* Matching Cards */
.matching-card {
    background: var(--matching-card-bg);
    border: 1px solid var(--matching-card-border);
    color: var(--text-primary);
}
.matching-card:hover { border-color: var(--matching-card-hover-border); }
.matching-card.flipped { background: var(--color-primary); color: white; }
.matching-card.matched { background: var(--color-success); color: white; }

/* Listening */
.audio-btn { background: var(--bg-card); color: var(--color-primary); }
.listening-input { background: var(--input-bg); border: 2px solid var(--input-border); color: var(--text-primary); }
.listening-input:focus { border-color: var(--input-focus-border); }
.listening-input.correct { border-color: var(--input-correct-border); }
.listening-input.incorrect { border-color: var(--input-incorrect-border); }
.listening-option { background: var(--listening-option-bg); border: 1px solid var(--listening-option-border); color: var(--text-primary); }
.listening-option:hover { border-color: var(--listening-option-hover-border); }
.listening-option.selected { border-color: var(--color-primary); background: rgba(255, 107, 107, 0.08); }
.listening-option.correct { background: rgba(16, 185, 129, 0.15); border-color: var(--color-success); }
.listening-option.incorrect { background: rgba(244, 63, 94, 0.12); border-color: var(--color-danger); }
.option-letter { background: var(--bg-tertiary); color: var(--text-primary); }

/* Reading */
.reading-passage { background: var(--reading-passage-bg); border: 1px solid var(--reading-passage-border); color: var(--text-primary); }
.reading-passage .word:hover { background: var(--word-hover-bg); }
.reading-question h3 { color: var(--text-primary); }

/* Grammar */
.grammar-pattern { background: var(--grammar-pattern-bg); border: 1px solid var(--grammar-pattern-border); color: var(--text-primary); }
.grammar-explanation h3 { color: var(--text-primary); }
.grammar-examples li { background: var(--grammar-example-bg); color: var(--text-primary); }
.grammar-examples li .example-pinyin { color: var(--text-secondary); }
.grammar-examples li .example-meaning { color: var(--text-secondary); }
.grammar-lesson-item { background: var(--grammar-lesson-item-bg); border: 1px solid var(--grammar-lesson-item-border); }
.grammar-lesson-item:hover { border-color: var(--grammar-lesson-item-hover-border); }
.grammar-lesson-number { background: var(--grammar-lesson-number-bg); color: white; }
.grammar-lesson-info h3 { color: var(--text-primary); }
.grammar-lesson-info p { color: var(--text-secondary); }

/* Speaking */
.speaking-text { color: var(--text-primary); }
.speaking-pinyin { color: var(--text-secondary); }

/* Achievements */
.achievement-card { background: var(--achievement-card-bg); border: 1px solid var(--achievement-card-border); }
.achievement-card:hover { border-color: var(--achievement-card-hover-border); }
.achievement-card.locked { background: var(--achievement-locked-bg); }
.achievement-icon { color: var(--color-secondary); }
.achievement-card h3 { color: var(--text-primary); }
.achievement-card p { color: var(--text-secondary); }
.achievement-date { color: var(--text-muted); }

/* Input Fields */
.input-field { background: var(--input-bg); border: 2px solid var(--input-border); color: var(--text-primary); }
.input-field:focus { border-color: var(--input-focus-border); }
.input-field.correct { border-color: var(--input-correct-border); }
.input-field.incorrect { border-color: var(--input-incorrect-border); }

/* Modal */
.modal-content { background: var(--modal-bg); color: var(--text-primary); }
.modal-overlay { background: var(--modal-overlay-bg); }
.modal-close { color: var(--text-secondary); }
.modal-close:hover { color: var(--text-primary); }

/* Toast */
.toast.success { background: var(--toast-success-bg); }
.toast.error { background: var(--toast-error-bg); }
.toast.info { background: var(--toast-info-bg); }

/* Scrollbar */
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); }
::-webkit-scrollbar { width: 6px; }

/* Text selection */
::selection {
    background: rgba(255, 107, 107, 0.25);
    color: var(--text-primary);
}

/* Screen-reader only */
.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap;
    border: 0;
}

/* === ACCESSIBLE REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}