/**
 * themes.css — 基础配色变量
 *
 * 通用变量在此定义；各阶段（work/break/idle）的配色由 themes.js 动态设置。
 * 保留 data-phase 选择器作为 JS 不可用时的回退。
 */

:root {
  /* 通用变量（所有状态共享） */
  --text-primary: #ECF0F1;
  --text-secondary: #BDC3C7;
  --text-muted: #7F8C8D;
  --card-bg: rgba(255, 255, 255, 0.06);
  --card-border: rgba(255, 255, 255, 0.1);
  --card-hover: rgba(255, 255, 255, 0.1);
  --btn-text: #FFFFFF;
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 24px;
  --transition: 0.4s ease;

  /* 阶段配色（由 themes.js 动态覆盖） */
  --accent: #7F8C8D;
  --accent-soft: #95A5A6;
  --accent-dim: rgba(127, 140, 141, 0.2);
  --bg-1: #1A1A2E;
  --bg-2: #16213E;
  --progress-color: #95A5A6;
  --theme-color: #1A1A2E;
}

/* === 回退：JS 不可用时的默认配色 === */
:root[data-phase="idle"] {
  --accent: #7F8C8D;
  --accent-soft: #95A5A6;
  --accent-dim: rgba(127, 140, 141, 0.2);
  --bg-1: #1A1A2E;
  --bg-2: #16213E;
  --progress-color: #95A5A6;
  --theme-color: #1A1A2E;
}

:root[data-phase="work"] {
  --accent: #E74C3C;
  --accent-soft: #FF6B6B;
  --accent-dim: rgba(231, 76, 60, 0.2);
  --bg-1: #2C1015;
  --bg-2: #1A0A0E;
  --progress-color: #FF6B6B;
  --theme-color: #E74C3C;
}

:root[data-phase="short-break"] {
  --accent: #27AE60;
  --accent-soft: #2ECC71;
  --accent-dim: rgba(39, 174, 96, 0.2);
  --bg-1: #0F2A1A;
  --bg-2: #081A12;
  --progress-color: #2ECC71;
  --theme-color: #27AE60;
}

:root[data-phase="long-break"] {
  --accent: #16A085;
  --accent-soft: #1ABC9C;
  --accent-dim: rgba(22, 160, 133, 0.2);
  --bg-1: #0A2A2A;
  --bg-2: #06201F;
  --progress-color: #1ABC9C;
  --theme-color: #16A085;
}

/* 全局背景过渡 */
html {
  background: linear-gradient(160deg, var(--bg-1), var(--bg-2));
  transition: background 0.6s ease;
}