/* ============================================================
   浅の小站 — 统一设计令牌
   Apple 磨砂玻璃 + 日式克制美学
   ============================================================ */

:root {
  /* ── 排版 · Apple SF Pro 标尺 ── */
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans JP",
    sans-serif;
  --font-mono: "SF Mono", "Cascadia Code", "Consolas", "Noto Sans Mono",
    monospace;

  --text-3xs: 0.625rem;     /* 10px — 超微文本 */
  --text-2xs: 0.688rem;     /* 11px — 标签/胶囊 */
  --text-xs: 0.75rem;       /* 12px — 元数据/脚注 */
  --text-sm: 0.813rem;      /* 13px — 辅助文本 */
  --text-base: 0.938rem;    /* 15px — 正文 */
  --text-md: 1.063rem;      /* 17px — 正文(强调) */
  --text-lg: 1.25rem;       /* 20px — 卡片标题 */
  --text-xl: 1.5rem;        /* 24px — 章节标题 */
  --text-2xl: 2rem;         /* 32px — 页面标题 */
  --text-3xl: clamp(2.4rem, 4.2vw, 3.5rem); /* 大标题(动态缩放) */

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-body: 1.65;
  --leading-relaxed: 1.85;
  --leading-loose: 2.0;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --tracking-tight: -0.04em;
  --tracking-normal: -0.01em;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.12em;

  /* ── 间距 · 8 点网格 ── */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */

  /* ── 圆角 ── */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-2xl: 28px;
  --radius-pill: 999px;

  /* ── 颜色 · 暖白基调 ── */
  --text-primary: rgba(255, 255, 255, 0.95);
  --text-secondary: rgba(255, 255, 255, 0.68);
  --text-tertiary: rgba(255, 255, 255, 0.42);
  --text-muted: rgba(255, 255, 255, 0.26);

  --accent-blue: rgba(175, 210, 240, 0.70);
  --accent-warm: rgba(235, 195, 200, 0.40);

  /* ── 统一玻璃效果 · Apple 轻薄磨砂 ── */
  --glass-bg: rgba(255, 255, 255, 0.08);
  --glass-bg-hover: rgba(255, 255, 255, 0.14);
  --glass-bg-active: rgba(255, 255, 255, 0.18);
  --glass-blur: blur(24px) saturate(160%);
  --glass-blur-hover: blur(32px) saturate(170%);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-border-hover: rgba(255, 255, 255, 0.14);

  /* ── 统一阴影 · 5 级深度 ── */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.14);
  --shadow-xl: 0 12px 48px rgba(0, 0, 0, 0.18);

  /* ── 统一高光 ── */
  --highlight-top: inset 0 1px 2px rgba(255, 255, 255, 0.22);
  --highlight-bottom: inset 0 -1px 0 rgba(0, 0, 0, 0.05);

  /* ── 动画 · Apple 弹性 + 日式从容 ── */
  --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1.0);
  --ease-in-out: cubic-bezier(0.4, 0.0, 0.2, 1.0);
  --ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1);
  --ease-wabi: cubic-bezier(0.6, 0.0, 0.4, 1.0);
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 600ms;

  /* ── 背景色（统一深蓝灰基调）── */
  --bg-color: #0f1119;

  /* ── 歌词焦点发光 ── */
  --lyric-glow: 0 0 18px rgba(175, 210, 240, 0.30);
}

/* ── 共享关键帧 ── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}