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

   themes.css · Our Smart Baby

   六套彩色模式主题

   加载顺序：2/34

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



/* M1 晨光（Dawn）· 默认主题 */

:root,

[data-theme="dawn"] {

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

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

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

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

  --theme-accent: hsl(25, 70%, 55%);

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

}



/* M2 正午（Noon） */

[data-theme="noon"] {

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

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

  --theme-text-primary: hsl(220, 50%, 22%);

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

  --theme-accent: hsl(220, 65%, 45%);

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

}



/* M3 黄昏（Dusk） */

[data-theme="dusk"] {

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

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

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

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

  --theme-accent: hsl(35, 65%, 50%);

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

}



/* M4 夜读（Night） */

[data-theme="night"] {

  --theme-bg: hsl(220, 45%, 14%);

  --theme-surface: hsl(220, 38%, 18%);

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

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

  --theme-accent: hsl(35, 70%, 60%);

  --theme-border: hsl(220, 30%, 28%);

}



/* M5 静默（Silent） */

[data-theme="silent"] {

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

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

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

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

  --theme-accent: hsl(0, 0%, 35%);

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

}



/* M6 活力（Vivid） */

[data-theme="vivid"] {

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

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

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

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

  --theme-accent: hsl(320, 80%, 50%);

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

}



/* 语义映射（主题切换生效） */

:root {

  --color-bg: var(--theme-bg);

  --color-surface: var(--theme-surface);

  --color-surface-hover: var(--theme-border);

  --color-text-primary: var(--theme-text-primary);

  --color-text-secondary: var(--theme-text-secondary);

  --color-border: var(--theme-border);

  --color-border-strong: var(--theme-text-secondary);

}



/* 移动端OLED夜读优化 */

@media (max-width: 768px) {

  [data-theme="night"] {

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

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

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

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

  }

}



/* 户外高对比度模式 */

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

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

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

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

  --theme-accent: hsl(25, 85%, 45%);

}



/* P3广色域适配 */

@media (color-gamut: p3) {

  :root {

    --theme-accent: color(display-p3 0.95 0.45 0.15);

  }

}



/* 主题切换过渡 */

html {

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

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

}



body {

  background-color: var(--color-bg);

  color: var(--color-text-primary);

}



/* 主题切换器样式 */

.theme-switcher {

  display: flex;

  gap: 8px;

  align-items: center;

}



.theme-option {

  width: 32px;

  height: 32px;

  border-radius: 50%;

  border: 2px solid transparent;

  cursor: pointer;

  transition: all var(--duration-normal) var(--ease-out);

}



.theme-option[aria-selected="true"] {

  border-color: var(--color-accent-500);

  box-shadow: 0 0 0 3px var(--color-primary-100);

}



.theme-option[data-theme-opt="dawn"] { background: hsl(35, 30%, 98%); }

.theme-option[data-theme-opt="noon"] { background: hsl(220, 15%, 95%); }

.theme-option[data-theme-opt="dusk"] { background: hsl(38, 25%, 90%); }

.theme-option[data-theme-opt="night"] { background: hsl(220, 50%, 22%); }

.theme-option[data-theme-opt="silent"] { background: hsl(0, 0%, 90%); }

.theme-option[data-theme-opt="vivid"] { background: hsl(280, 60%, 95%); }



@media (max-width: 768px) {

  .theme-switcher {

    overflow-x: auto;

    padding: var(--space-2);

    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;

  }

  .theme-switcher::-webkit-scrollbar { display: none; }

  .theme-option {

    flex-shrink: 0;

    width: 44px;

    height: 44px;

  }

}