@import "tailwindcss";

:root {
  --bg: #fff8fa;
  --bg-soft: #fdeef3;
  --ink: #3a3242;
  --ink-soft: #7a6e85;
  --accent: #e85d80;
  --accent-bright: #ff7e9d;
  --violet: #8c7ae6;
  --line: #f0dce4;
  --card: #ffffff;
  --chip-bg: #fde7ee;
  --wave: #ff7e9d;
  --frame: #e8d8df;
  --shadow: 0 12px 40px rgba(232, 93, 128, 0.1);

  /* 向下相容 A-5 首頁使用的別名 */
  --color-heartbeat-pink: var(--accent-bright);
  --color-dusk-purple: var(--violet);
  --background: var(--bg);
  --foreground: var(--ink);
}

@theme inline {
  --color-heartbeat-pink: var(--color-heartbeat-pink);
  --color-dusk-purple: var(--color-dusk-purple);
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-bg: var(--bg);
  --color-bg-soft: var(--bg-soft);
  --color-ink: var(--ink);
  --color-ink-soft: var(--ink-soft);
  --color-accent: var(--accent);
  --color-accent-bright: var(--accent-bright);
  --color-violet: var(--violet);
  --color-line: var(--line);
  --color-card: var(--card);
  --color-chip-bg: var(--chip-bg);
  --color-frame: var(--frame);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1430;
    --bg-soft: #241b40;
    --ink: #f2e9f2;
    --ink-soft: #a99bbf;
    --accent: #ff7e9d;
    --accent-bright: #ff9db5;
    --violet: #a796f5;
    --line: #372b55;
    --card: #221a3d;
    --chip-bg: #33244a;
    --wave: #ff7e9d;
    --frame: #3b2f5c;
    --shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  }
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans), ui-rounded, "PingFang TC", "Microsoft JhengHei", sans-serif;
}

/* H-4 心跳波形母題：載入動畫由左至右畫出 */
.heartbeat-wave-line {
  color: var(--wave);
}
.heartbeat-wave-animate {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: heartbeat-draw 1.6s ease-out forwards;
}
@keyframes heartbeat-draw {
  to {
    stroke-dashoffset: 0;
  }
}

/* H-4 通知紅點：一次小小的心跳脈動 */
.heartbeat-dot {
  animation: heartbeat-pulse 1.2s ease-in-out infinite;
}
@keyframes heartbeat-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.3);
    opacity: 0.7;
  }
}

@media (prefers-reduced-motion: reduce) {
  .heartbeat-wave-animate {
    stroke-dashoffset: 0;
    animation: none;
  }
  .heartbeat-dot {
    animation: none;
  }
}