/**
 * til.re 默认主题
 * 简洁深色风格，大字体倒计时
 */

/* 主题变量 */
:root {
  --theme-bg: #1a1a2e;
  --theme-color: #ffffff;
  --theme-accent: #4a9eff;
  --theme-timer-size: 8rem;
  --theme-separator-size: 6rem;
}

/* 应用主题 */
body {
  background-color: var(--theme-bg);
  color: var(--theme-color);
}

/* 计时器样式 */
.timer {
  font-size: var(--theme-timer-size);
  letter-spacing: 0.02em;
}

.separator {
  font-size: var(--theme-separator-size);
  margin: 0 0.1em;
}

/* 休息状态 - 绿色调 */
.state-rest {
  --theme-color: #4ade80;
}

.state-rest .timer {
  color: var(--theme-color);
}

/* 完成状态 */
.state-finished .message {
  color: var(--theme-accent);
  font-size: 2rem;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.02); }
}

/* 响应式字体大小 */
@media (max-width: 768px) {
  :root {
    --theme-timer-size: 5rem;
    --theme-separator-size: 4rem;
  }
}

@media (max-width: 480px) {
  :root {
    --theme-timer-size: 3.5rem;
    --theme-separator-size: 2.5rem;
  }
}

@media (max-width: 320px) {
  :root {
    --theme-timer-size: 2.5rem;
    --theme-separator-size: 2rem;
  }
}

/* 支持用户自定义颜色 */
body[data-color] {
  color: var(--custom-color);
}

body[data-bg] {
  background-color: var(--custom-bg);
}