/* ==========================================================================

   themes.css · trackandreact.com

   六套彩色模式主题 — 晨光/正午/黄昏/夜读/静默/活力

   生成者：Crystal Yifei Liu · 2026-09-25

   依赖：tokens.css

   ========================================================================== */



/* ==========================================================================

   M1 · 晨光（Dawn）— 暖白底 + 暖橙强调

   情绪：温暖、开始、柔和

   适用：上午阅读、学习类内容

   ========================================================================== */

[data-theme="dawn"] {

  --color-bg: hsl(35, 30%, 98%);

  --color-surface: hsl(35, 25%, 96%);

  --color-surface-hover: hsl(35, 25%, 92%);

  --color-text-primary: hsl(30, 15%, 15%);

  --color-text-secondary: hsl(30, 10%, 45%);

  --color-text-tertiary: hsl(30, 10%, 60%);

  --color-border: hsl(35, 20%, 88%);

  --color-border-strong: hsl(35, 20%, 80%);



  --color-primary-50: hsl(25, 70%, 97%);

  --color-primary-100: hsl(25, 70%, 92%);

  --color-primary-200: hsl(25, 70%, 85%);

  --color-primary-300: hsl(25, 70%, 75%);

  --color-primary-400: hsl(25, 70%, 65%);

  --color-primary-500: hsl(25, 70%, 55%);

  --color-primary-600: hsl(25, 70%, 45%);

  --color-primary-700: hsl(25, 70%, 35%);

  --color-primary-800: hsl(25, 70%, 25%);

  --color-primary-900: hsl(25, 70%, 15%);



  --color-accent-50: hsl(15, 80%, 97%);

  --color-accent-100: hsl(15, 80%, 92%);

  --color-accent-200: hsl(15, 80%, 85%);

  --color-accent-300: hsl(15, 80%, 75%);

  --color-accent-400: hsl(15, 80%, 65%);

  --color-accent-500: hsl(15, 80%, 55%);

  --color-accent-600: hsl(15, 80%, 45%);

  --color-accent-700: hsl(15, 80%, 35%);

  --color-accent-800: hsl(15, 80%, 25%);

  --color-accent-900: hsl(15, 80%, 15%);



  --color-cta-bg: var(--color-primary-500);

  --color-cta-hover: var(--color-primary-600);

  --color-cta-text: hsl(0, 0%, 100%);



  --shadow-focus: 0 0 0 3px hsla(25, 70%, 55%, 0.25);

}



/* ==========================================================================

   M2 · 正午（Noon）— 纯白底 + 钴蓝强调

   情绪：清晰、直接、专注

   适用：工作时段、技术类内容

   ========================================================================== */

[data-theme="noon"] {

  --color-bg: hsl(0, 0%, 100%);

  --color-surface: hsl(0, 0%, 97%);

  --color-surface-hover: hsl(0, 0%, 94%);

  --color-text-primary: hsl(220, 15%, 12%);

  --color-text-secondary: hsl(220, 10%, 45%);

  --color-text-tertiary: hsl(220, 10%, 60%);

  --color-border: hsl(220, 15%, 90%);

  --color-border-strong: hsl(220, 15%, 82%);



  --color-primary-50: hsl(220, 65%, 97%);

  --color-primary-100: hsl(220, 65%, 92%);

  --color-primary-200: hsl(220, 65%, 85%);

  --color-primary-300: hsl(220, 65%, 75%);

  --color-primary-400: hsl(220, 65%, 60%);

  --color-primary-500: hsl(220, 65%, 45%);

  --color-primary-600: hsl(220, 65%, 35%);

  --color-primary-700: hsl(220, 65%, 27%);

  --color-primary-800: hsl(220, 65%, 20%);

  --color-primary-900: hsl(220, 65%, 12%);



  --color-accent-50: hsl(145, 45%, 97%);

  --color-accent-100: hsl(145, 45%, 92%);

  --color-accent-200: hsl(145, 45%, 85%);

  --color-accent-300: hsl(145, 45%, 75%);

  --color-accent-400: hsl(145, 45%, 60%);

  --color-accent-500: hsl(145, 45%, 45%);

  --color-accent-600: hsl(145, 45%, 35%);

  --color-accent-700: hsl(145, 45%, 27%);

  --color-accent-800: hsl(145, 45%, 20%);

  --color-accent-900: hsl(145, 45%, 12%);



  --color-cta-bg: var(--color-primary-500);

  --color-cta-hover: var(--color-primary-600);

  --color-cta-text: hsl(0, 0%, 100%);



  --shadow-focus: 0 0 0 3px hsla(220, 65%, 45%, 0.25);

}



/* ==========================================================================

   M3 · 黄昏（Dusk）— 米色底 + 琥珀强调

   情绪：怀旧、舒适、放松

   适用：傍晚阅读、深度内容

   ========================================================================== */

[data-theme="dusk"] {

  --color-bg: hsl(38, 25%, 94%);

  --color-surface: hsl(38, 20%, 90%);

  --color-surface-hover: hsl(38, 20%, 86%);

  --color-text-primary: hsl(30, 20%, 18%);

  --color-text-secondary: hsl(30, 15%, 45%);

  --color-text-tertiary: hsl(30, 15%, 60%);

  --color-border: hsl(38, 18%, 84%);

  --color-border-strong: hsl(38, 18%, 76%);



  --color-primary-50: hsl(35, 65%, 97%);

  --color-primary-100: hsl(35, 65%, 92%);

  --color-primary-200: hsl(35, 65%, 85%);

  --color-primary-300: hsl(35, 65%, 75%);

  --color-primary-400: hsl(35, 65%, 62%);

  --color-primary-500: hsl(35, 65%, 50%);

  --color-primary-600: hsl(35, 65%, 40%);

  --color-primary-700: hsl(35, 65%, 30%);

  --color-primary-800: hsl(35, 65%, 22%);

  --color-primary-900: hsl(35, 65%, 14%);



  --color-accent-50: hsl(28, 60%, 97%);

  --color-accent-100: hsl(28, 60%, 92%);

  --color-accent-200: hsl(28, 60%, 85%);

  --color-accent-300: hsl(28, 60%, 75%);

  --color-accent-400: hsl(28, 60%, 62%);

  --color-accent-500: hsl(28, 60%, 50%);

  --color-accent-600: hsl(28, 60%, 40%);

  --color-accent-700: hsl(28, 60%, 30%);

  --color-accent-800: hsl(28, 60%, 22%);

  --color-accent-900: hsl(28, 60%, 14%);



  --color-cta-bg: var(--color-primary-500);

  --color-cta-hover: var(--color-primary-600);

  --color-cta-text: hsl(0, 0%, 100%);



  --shadow-focus: 0 0 0 3px hsla(35, 65%, 50%, 0.25);

}



/* ==========================================================================

   M4 · 夜读（Night）— 深灰底 + 暖黄强调

   情绪：沉浸、静谧、护眼

   适用：夜间阅读、深度内容

   ========================================================================== */

[data-theme="night"] {

  --color-bg: hsl(220, 15%, 10%);

  --color-surface: hsl(220, 12%, 14%);

  --color-surface-hover: hsl(220, 12%, 18%);

  --color-text-primary: hsl(35, 15%, 85%);

  --color-text-secondary: hsl(35, 10%, 60%);

  --color-text-tertiary: hsl(35, 8%, 45%);

  --color-border: hsl(220, 12%, 22%);

  --color-border-strong: hsl(220, 12%, 30%);



  --color-primary-50: hsl(35, 70%, 15%);

  --color-primary-100: hsl(35, 70%, 20%);

  --color-primary-200: hsl(35, 70%, 28%);

  --color-primary-300: hsl(35, 70%, 38%);

  --color-primary-400: hsl(35, 70%, 48%);

  --color-primary-500: hsl(35, 70%, 60%);

  --color-primary-600: hsl(35, 70%, 68%);

  --color-primary-700: hsl(35, 70%, 78%);

  --color-primary-800: hsl(35, 70%, 85%);

  --color-primary-900: hsl(35, 70%, 92%);



  --color-accent-50: hsl(145, 40%, 15%);

  --color-accent-100: hsl(145, 40%, 20%);

  --color-accent-200: hsl(145, 40%, 28%);

  --color-accent-300: hsl(145, 40%, 38%);

  --color-accent-400: hsl(145, 40%, 48%);

  --color-accent-500: hsl(145, 40%, 58%);

  --color-accent-600: hsl(145, 40%, 66%);

  --color-accent-700: hsl(145, 40%, 76%);

  --color-accent-800: hsl(145, 40%, 84%);

  --color-accent-900: hsl(145, 40%, 92%);



  --color-cta-bg: var(--color-primary-500);

  --color-cta-hover: var(--color-primary-400);

  --color-cta-text: hsl(220, 15%, 10%);



  --shadow-focus: 0 0 0 3px hsla(35, 70%, 60%, 0.25);

}



/* ==========================================================================

   M5 · 静默（Silent）— 纯灰底 + 极低饱和强调

   情绪：极简、无干扰、专注

   适用：长文阅读、研究类内容

   ========================================================================== */

[data-theme="silent"] {

  --color-bg: hsl(0, 0%, 96%);

  --color-surface: hsl(0, 0%, 93%);

  --color-surface-hover: hsl(0, 0%, 90%);

  --color-text-primary: hsl(0, 0%, 15%);

  --color-text-secondary: hsl(0, 0%, 45%);

  --color-text-tertiary: hsl(0, 0%, 60%);

  --color-border: hsl(0, 0%, 88%);

  --color-border-strong: hsl(0, 0%, 80%);



  --color-primary-50: hsl(0, 0%, 97%);

  --color-primary-100: hsl(0, 0%, 93%);

  --color-primary-200: hsl(0, 0%, 87%);

  --color-primary-300: hsl(0, 0%, 78%);

  --color-primary-400: hsl(0, 0%, 65%);

  --color-primary-500: hsl(0, 0%, 50%);

  --color-primary-600: hsl(0, 0%, 40%);

  --color-primary-700: hsl(0, 0%, 32%);

  --color-primary-800: hsl(0, 0%, 24%);

  --color-primary-900: hsl(0, 0%, 16%);



  --color-accent-50: hsl(0, 0%, 97%);

  --color-accent-100: hsl(0, 0%, 93%);

  --color-accent-200: hsl(0, 0%, 87%);

  --color-accent-300: hsl(0, 0%, 78%);

  --color-accent-400: hsl(0, 0%, 65%);

  --color-accent-500: hsl(0, 0%, 50%);

  --color-accent-600: hsl(0, 0%, 40%);

  --color-accent-700: hsl(0, 0%, 32%);

  --color-accent-800: hsl(0, 0%, 24%);

  --color-accent-900: hsl(0, 0%, 16%);



  --color-cta-bg: var(--color-primary-600);

  --color-cta-hover: var(--color-primary-700);

  --color-cta-text: hsl(0, 0%, 100%);



  --shadow-focus: 0 0 0 3px hsla(0, 0%, 50%, 0.25);

}



/* ==========================================================================

   M6 · 活力（Vivid）— 白底 + 高饱和撞色强调

   情绪：年轻、能量、创意

   适用：创意类内容、年轻读者

   ========================================================================== */

[data-theme="vivid"] {

  --color-bg: hsl(0, 0%, 100%);

  --color-surface: hsl(280, 20%, 97%);

  --color-surface-hover: hsl(280, 20%, 94%);

  --color-text-primary: hsl(260, 20%, 12%);

  --color-text-secondary: hsl(260, 15%, 45%);

  --color-text-tertiary: hsl(260, 15%, 60%);

  --color-border: hsl(280, 15%, 90%);

  --color-border-strong: hsl(280, 15%, 82%);



  --color-primary-50: hsl(320, 80%, 97%);

  --color-primary-100: hsl(320, 80%, 92%);

  --color-primary-200: hsl(320, 80%, 85%);

  --color-primary-300: hsl(320, 80%, 75%);

  --color-primary-400: hsl(320, 80%, 62%);

  --color-primary-500: hsl(320, 80%, 50%);

  --color-primary-600: hsl(320, 80%, 42%);

  --color-primary-700: hsl(320, 80%, 34%);

  --color-primary-800: hsl(320, 80%, 26%);

  --color-primary-900: hsl(320, 80%, 18%);



  --color-accent-50: hsl(265, 85%, 97%);

  --color-accent-100: hsl(265, 85%, 92%);

  --color-accent-200: hsl(265, 85%, 85%);

  --color-accent-300: hsl(265, 85%, 75%);

  --color-accent-400: hsl(265, 85%, 68%);

  --color-accent-500: hsl(265, 85%, 58%);

  --color-accent-600: hsl(265, 85%, 50%);

  --color-accent-700: hsl(265, 85%, 42%);

  --color-accent-800: hsl(265, 85%, 32%);

  --color-accent-900: hsl(265, 85%, 22%);



  --color-cta-bg: var(--color-primary-500);

  --color-cta-hover: var(--color-primary-600);

  --color-cta-text: hsl(0, 0%, 100%);



  --shadow-focus: 0 0 0 3px hsla(320, 80%, 50%, 0.25);

}



/* ==========================================================================

   移动端 OLED 夜读优化

   ========================================================================== */

@media (max-width: 768px) {

  [data-theme="night"] {

    --color-bg: hsl(0, 0%, 0%);

    --color-surface: hsl(220, 10%, 8%);

    --color-surface-hover: hsl(220, 10%, 12%);

    --color-text-primary: hsl(35, 12%, 80%);

    --color-text-secondary: hsl(35, 10%, 55%);

    --color-accent-500: hsl(35, 60%, 55%);

    --color-primary-500: hsl(35, 60%, 55%);

  }

}



/* ==========================================================================

   户外高对比度模式

   ========================================================================== */

[data-theme="dawn"][data-outdoor="true"],

[data-theme="noon"][data-outdoor="true"] {

  --color-text-primary: hsl(30, 20%, 5%);

  --color-bg: hsl(0, 0%, 100%);

  --color-surface: hsl(0, 0%, 98%);

  --color-primary-500: hsl(25, 85%, 45%);

  --color-cta-bg: hsl(25, 85%, 45%);

  --color-cta-hover: hsl(25, 85%, 38%);

}



/* ==========================================================================

   P3 广色域适配

   ========================================================================== */

@media (color-gamut: p3) {

  :root {

    --color-primary-500: color(display-p3 0.32 0.42 0.75);

    --color-accent-500: color(display-p3 0.30 0.65 0.45);

  }

}



/* ==========================================================================

   主题切换过渡（防CLS）

   ========================================================================== */

html {

  transition: background-color var(--duration-slow) var(--ease-in-out),

              color var(--duration-slow) var(--ease-in-out);

}



body,

.nav,

.card,

.btn-cta,

.article-card,

.aggregation-card {

  transition: background-color var(--duration-slow) var(--ease-in-out),

              border-color var(--duration-slow) var(--ease-in-out),

              color var(--duration-slow) var(--ease-in-out);

}



@media (prefers-reduced-motion: reduce) {

  html,

  body,

  .nav,

  .card,

  .btn-cta,

  .article-card,

  .aggregation-card {

    transition: none;

  }

}