/* =========================================================
   tokens.css — 设计令牌层
   方向：Cute / Toy-like —— 糖果贴纸。奶油底 + 厚描边 + 圆润块面 + 弹性动效
   母题：「点点」—— 全站点阵贯穿（波点背景、虚线、圆点编号、点点 Logo）
   规则：所有颜色 / 字阶 / 间距 / 圆角 / 阴影 / 动效一律走这里
   ========================================================= */

:root {
  /* ---------- 字体 ---------- */
  /* 展示：Fredoka 圆润拉丁 + 站酷快乐体中文（ZCOOL KuaiLe 只有 400 一个字重） */
  --font-display: "Fredoka", "ZCOOL KuaiLe", "PingFang SC", sans-serif;
  --font-cn-display: "ZCOOL KuaiLe", "Fredoka", "PingFang SC", sans-serif;
  --font-body: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  /* 小标签：Nunito 圆润但比展示字安静 */
  --font-label: "Nunito", "Noto Sans SC", sans-serif;

  /* ---------- 字阶（1.25 模块比例 + 流体首屏） ---------- */
  --step--2: 0.68rem;
  --step--1: 0.85rem;
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: 1.563rem;
  --step-3: 1.953rem;
  --step-4: 2.441rem;
  --step-5: 3.052rem;
  --step-hero: clamp(2.6rem, 8.4vw, 6.6rem);
  --step-mega: clamp(4rem, 16vw, 12rem);

  /* 行高 / 字距：圆体需要更松的行距才不挤 */
  --lh-tight: 1.08;
  --lh-title: 1.28;
  --lh-body: 1.85;
  --track-display: -0.01em;
  --track-title: -0.005em;
  --track-body: 0.02em;
  --track-label: 0.08em;

  /* ---------- 颜色：60 奶油 / 30 薄荷白 / 10 珊瑚红 ---------- */
  --color-bg: #fff6ea;            /* 奶油底，刻意不用纯白 */
  --color-bg-tint: #ffefdc;       /* 次级底色区块 */
  --color-surface: #ffffff;       /* 卡片 */
  --color-surface-alt: #f3fff9;   /* 偏薄荷的卡片变体 */
  --color-ink: #2a1b14;           /* 深可可，替代纯黑 */
  --color-ink-soft: #6b5449;      /* 次要文字：对奶油底 ≈ 6.7:1 */
  --color-ink-faint: #9b877b;     /* 仅用于装饰标签，不承载关键信息 */
  --color-accent: #ff5c77;        /* 唯一强调色：泡泡糖珊瑚（按键 / 高亮） */
  --color-accent-deep: #e63f5c;   /* 强调色的按下态 */
  --color-border: #2a1b14;        /* 厚描边统一用墨色，贴纸感来源 */

  /* 糖果辅助色：只做块面与标签底色，不参与竞争强调位的注视点 */
  --candy-mint: #7fd8be;
  --candy-sky: #74c0fc;
  --candy-lemon: #ffd75e;
  --candy-lavender: #c0a9ff;
  --candy-peach: #ffb38a;

  /* 引擎身份色（标签描边/底色，语义化） */
  --color-ue: #ff5c77;
  --color-godot: #74c0fc;
  --color-unity: #ffd75e;

  /* ---------- 间距梯度 ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 144px;

  /* ---------- 布局 ---------- */
  --wrap: 1320px;
  --gutter: clamp(18px, 5vw, 72px);
  --bar-h: 68px;

  /* ---------- 圆角：越大越可爱 ---------- */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 26px;
  --radius-xl: 38px;
  --radius-pill: 999px;

  /* ---------- 描边宽度 ---------- */
  --stroke: 2.5px;

  /* ---------- 阴影：硬边位移，像贴纸浮在纸上 ---------- */
  --pop: 5px 5px 0 rgba(42, 27, 20, 0.14);
  --pop-sm: 3px 3px 0 rgba(42, 27, 20, 0.12);
  --pop-lg: 8px 8px 0 rgba(42, 27, 20, 0.16);
  --pop-accent: 5px 5px 0 rgba(255, 92, 119, 0.28);
  --shadow-soft: 0 18px 40px rgba(42, 27, 20, 0.10);

  /* ---------- 动效：可爱 = 弹性 ---------- */
  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 620ms;
  --ease-out: cubic-bezier(0.22, 0.9, 0.28, 1);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);  /* 回弹关键 */
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);

  --measure: 60ch;
}