/* ═══════════════════════════════════════════
   base.css — Biến màu, reset, nền tảng chung
   Câu Chuyện Của Chúng Mình 💕
   ═══════════════════════════════════════════ */

:root {
  --blush: #F2A7BB;
  --petal: #FFC0CB;
  --mist: #FFF0F5;
  --cream: #FFFAF7;
  --rose-gold: #C9848E;
  --mauve: #9B6B78;
  --ink: #3A2328;
  --soft-ink: #6B4550;

  /* surface tokens */
  --bg-page: #FFFAF7;
  --bg-card: #ffffff;
  --bg-letter-card: #FFFDF9;
  --bg-music-bar: #ffffff;
  --border-card: rgba(255,192,203,0.3);
  --shadow-card: rgba(201,132,142,0.12);
}

/* ─── DARK MODE ─── */
html.dark {
  --cream: #0D0D0D;
  --mist: #1A1A1A;
  --ink: #F5E6EA;
  --soft-ink: #D4A0AE;
  --rose-gold: #F2A7BB;
  --mauve: #F2A7BB;

  --bg-page: #0D0D0D;
  --bg-card: #1A1015;
  --bg-letter-card: #180E12;
  --bg-music-bar: #1A1015;
  --border-card: rgba(242,167,187,0.15);
  --shadow-card: rgba(242,167,187,0.08);
}

/* ─── BÌNH MINH (5:00–7:59) ─── */
html.dawn {
  --blush: #E8946A;
  --petal: #F4B97A;
  --mist: #FFF6EC;
  --cream: #FFFBF4;
  --rose-gold: #C47840;
  --mauve: #A05C38;
  --ink: #2A1808;
  --soft-ink: #5C3218;

  --bg-page: #FFFBF4;
  --bg-card: #FFFDF8;
  --bg-letter-card: #FFFCF6;
  --bg-music-bar: #FFFDF8;
  --border-card: rgba(232,148,106,0.25);
  --shadow-card: rgba(196,120,64,0.1);
}

/* ─── HOÀNG HÔN (17:00–19:59) ─── */
html.dusk {
  --blush: #D4785A;
  --petal: #E8956A;
  --mist: #2A1520;
  --cream: #1A0E14;
  --rose-gold: #E8956A;
  --mauve: #C4708A;
  --ink: #F5E0D8;
  --soft-ink: #D4A898;

  --bg-page: #1A0E14;
  --bg-card: #251318;
  --bg-letter-card: #221018;
  --bg-music-bar: #251318;
  --border-card: rgba(232,149,106,0.18);
  --shadow-card: rgba(212,120,90,0.12);
}

/* ─── RESET & BASE ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
html, html * { transition: background-color 0.6s ease, border-color 0.5s ease, color 0.4s ease, box-shadow 0.5s ease; }
/* exclude animations & transforms from blanket transition */
html .petal, html .bokeh-blob { transition: none; }

body {
  background: var(--bg-page);
  color: var(--ink);
  font-family: 'Lora', Georgia, serif;
  overflow-x: hidden;
}

html.dark body {
  background: var(--bg-page);
  color: var(--ink);
  transition: background 0.4s ease, color 0.4s ease;
}

/* ─── Smooth transition helper cho các khối nền theo theme ─── */
body, #welcome, #timeline, #letter, footer,
.timeline-card, .letter-card, .music-bar, .yt-input, .tl-photo {
  transition: background 0.4s ease, color 0.4s ease,
              border-color 0.4s ease, box-shadow 0.4s ease;
}

/* ─── Keyframes dùng chung nhiều nơi (welcome, footer, envelope, timeline) ─── */
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  14%       { transform: scale(1.22); }
  28%       { transform: scale(1); }
  42%       { transform: scale(1.15); }
  70%       { transform: scale(1); }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Divider dùng chung giữa các section (timeline & letter) ─── */
.section-divider {
  text-align: center;
  padding: 3rem 1rem 1rem;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  font-style: italic;
  color: var(--rose-gold);
  letter-spacing: 0.05em;
}
.divider-line {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: center;
  margin: 0.5rem auto 2.5rem;
  max-width: 400px;
}
.divider-line::before, .divider-line::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--blush), transparent);
}
.divider-line .diamond { color: var(--blush); font-size: 1rem; }