/* ═══════════════════════════════════════════════════════════
   root.css — design tokens for the Sweet Memory Blog
   Hello-Kitty-*inspired* original design language:
   soft pinks, cream, rounded shapes, bows & cute motifs.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Color palette ─────────────────────────────────────── */
  --bg-primary: #fff8fb;
  --bg-secondary: #ffeaf2;
  --surface: #fffdfd;
  --surface-pink: #fff0f5;
  --pink-light: #ffd6e7;
  --pink-soft: #f8b6c9;
  --pink-main: #ff8fb1;
  --pink-strong: #ff6f9f;
  --lilac: #d9c2ff;
  --lilac-soft: #efe6ff;
  --cream: #fff8ec;
  --mint-hint: #d9f2e6;

  --text-primary: #55434f;
  --text-secondary: #826f7b;
  --text-faint: #a5929e;
  --text-on-pink: #ffffff;

  --border-soft: rgba(255, 143, 177, 0.25);
  --border-softer: rgba(255, 143, 177, 0.14);
  --shadow-soft: 0 16px 45px rgba(187, 101, 137, 0.14);
  --shadow-lift: 0 22px 55px rgba(187, 101, 137, 0.22);
  --shadow-chip: 0 6px 18px rgba(255, 111, 159, 0.18);

  --grad-pink: linear-gradient(120deg, #ff6f9f 0%, #ff8fb1 45%, #c9a6ff 100%);
  --grad-hero: linear-gradient(160deg, #fff0f6 0%, #ffe4ef 45%, #f3e8ff 100%);
  --grad-btn: linear-gradient(135deg, #ff8fb1, #ff6f9f);

  /* ── Typography ────────────────────────────────────────── */
  --font-body: "Trebuchet MS", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  --font-display: ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;

  --fs-hero: clamp(2.1rem, 4.2vw, 3.2rem);
  --fs-kicker: 0.85rem;
  --fs-section: clamp(1.4rem, 2.4vw, 1.85rem);
  --fs-card-title: 1.02rem;
  --fs-body: 1rem;
  --fs-small: 0.86rem;
  --fs-tiny: 0.75rem;

  --lh-body: 1.7;

  /* ── Shape language ────────────────────────────────────── */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pill: 999px;

  /* ── Layout ────────────────────────────────────────────── */
  --page-max: 1560px;
  --page-pad: clamp(16px, 3vw, 34px);
  --sidebar-width: 340px;
  --col-gap: clamp(22px, 2.4vw, 34px);

  /* ── Motion ────────────────────────────────────────────── */
  --ease-soft: cubic-bezier(0.25, 0.8, 0.3, 1);
  --dur-fast: 0.18s;
  --dur-med: 0.3s;
  --dur-slow: 0.6s;
}