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

   themes.css · 六套彩色模式主题

   项目：CoolWalking

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



[data-theme="dawn"] {

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

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

  --color-surface-hover: hsl(35, 22%, 93%);

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

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

  --color-text-tertiary: hsl(30, 8%, 65%);

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

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

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

}



[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, 8%, 65%);

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

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

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

}



[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, 12%, 65%);

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

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

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

}



[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-accent: hsl(35, 70%, 60%);

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

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

}



@media (max-width: 768px) {

  [data-theme="night"] {

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

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

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

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

  }

}



[data-theme="silent"] {

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

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

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

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

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

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

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

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

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

}



[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, 12%, 65%);

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

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

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

}



[data-outdoor="true"] {

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

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

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

}