/* ============================================================
   Kron Design System · tokens v1.1 · 冻结 LOCKED 2026-07-12
   母系统统一中性色 + 每产品一个 accent（站内只覆写 --accent 一行）
   消费方式：三站直接 copy 本文件（或 @import），组件一律引用变量，
   永不写死 hex。改动以 ~/KronDesign/ 为唯一事实源。
   ⚠️ v1.0 起设计基因冻结：色/字阶/圆角/间距/动效 = 契约，改任何一档
      须走版本 bump + 三站同步；组件层禁引入新 hex/新档位。
   v1.1（只加不改，不破 v1.0 冻结承诺）：补组件契约缺口 —— +--scrim
      (Sheet 遮罩) / +--kron-* (木偶品牌资产色，跨主题恒定) / +--xp
      (跨产品经验值语义色) / +--focus-ring-width/offset (focus 环，色直接
      用 var(--accent) 避开别名坑)。既有 v1.0 档位一字未动。
   ============================================================ */

:root {
  /* ---- 中性色（iOS HIG 系）· Light ---- */
  --bg: #F2F2F7;                      /* grouped background */
  --bg-elevated: #FFFFFF;
  --surface: #FFFFFF;                 /* 卡片 */
  --surface-2: #F2F2F7;               /* 卡内分层 */
  --label: #1C1C1E;
  --label-2: rgba(60, 60, 67, 0.6);
  --label-3: rgba(60, 60, 67, 0.3);
  --separator: rgba(60, 60, 67, 0.29);
  --fill-track: rgba(120, 120, 128, 0.16);   /* 进度槽/未填充 */
  --quill: #212126;                   /* KronPuppet 刺 */
  --quill-edge: transparent;          /* 刺描边（暗底提对比） */

  /* ---- 产品 accent（每站覆写 --accent 即完成换肤）---- */
  --accent: var(--accent-english);
  --accent-english: #0A84FF;          /* KronEnglish 快学英语 */
  --accent-cast: #5E5CE6;             /* KronCast（systemIndigo，已批） */
  --accent-word: #30D158;             /* KronCode（systemGreen，已批） */
  --accent-glow: #64D2FF;             /* Loader 充电渐变浅端 */
  --on-accent: #FFFFFF;
  --accent-tint: color-mix(in srgb, var(--accent) 12%, var(--surface));

  /* ---- 语义色（与 accent 独立，不挪用）---- */
  --success: #30D158;
  --error: #FF453A;
  --warning: #FF9F0A;
  --streak: #FF9F0A;                  /* 火焰 */
  --coin: #FFD60A;
  --star: #FFD60A;
  --xp: #BF5AF2;                      /* v1.1 跨产品经验值（systemPurple，非 accent：XP 全站共享一色） */

  /* ---- 字体 ---- */
  /* 标题=圆体（Apple 设备原生 SF Rounded；中文圆体 Yuanti SC 系统内置） */
  --font-display: ui-rounded, "SF Pro Rounded", "Yuanti SC", "幼圆", var(--font-body);
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC",
               "Helvetica Neue", system-ui, sans-serif;

  /* ---- 字阶（iOS Dynamic Type 锚点）---- */
  --fs-largetitle: 34px;
  --fs-title1: 28px;
  --fs-title2: 22px;
  --fs-headline: 17px;   /* semibold */
  --fs-body: 17px;
  --fs-callout: 16px;
  --fs-subhead: 15px;
  --fs-footnote: 13px;
  --fs-caption: 12px;

  /* ---- 圆角 ---- */
  --r-s: 8px;
  --r-m: 12px;
  --r-l: 16px;      /* 卡片默认 */
  --r-xl: 20px;
  --r-sheet: 28px;
  --r-pill: 999px;

  /* ---- 阴影 ---- */
  --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-raised: 0 8px 24px rgba(0, 0, 0, 0.12);

  /* ---- 间距（4pt 网格）---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 44px;

  /* ---- 动效 ---- */
  --dur-fast: 120ms;
  --dur-med: 240ms;
  --dur-slow: 400ms;
  --ease-std: cubic-bezier(0.2, 0, 0, 1);      /* Apple 常规 */
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);  /* juice：按钮/入场过冲 */
  --press-scale: 0.96;                          /* 按压缩放，全站统一 */

  /* ---- v1.1 组件契约补档 ---- */
  --scrim: rgba(0, 0, 0, 0.4);                  /* Sheet/模态遮罩（Light） */
  --focus-ring-width: 3px;                      /* focus-visible 环宽（色直接用 var(--accent)） */
  --focus-ring-offset: 2px;

  /* KronPuppet 品牌资产固有色（毛绒本体，跨主题恒定，不随暗色改） */
  --kron-face: #F4E6D2;               /* 头/脸 */
  --kron-body: #F2E3CE;               /* 耳/臂/体 奶油 */
  --kron-body-2: #E9D7BF;             /* 耳内 */
  --kron-belly: #F8EEDD;              /* 肚 */
  --kron-foot: #EAD9C2;               /* 脚 */
  --kron-feature: #17171A;            /* 五官（眼/鼻/嘴） */
}

/* ---- Dark（OS 偏好）---- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --bg-elevated: #1C1C1E;
    --surface: #1C1C1E;
    --surface-2: #2C2C2E;
    --label: #F2F2F7;
    --label-2: rgba(235, 235, 245, 0.6);
    --label-3: rgba(235, 235, 245, 0.3);
    --separator: rgba(84, 84, 88, 0.6);
    --fill-track: rgba(120, 120, 128, 0.32);
    --quill: #2C2C33;
    --quill-edge: rgba(255, 255, 255, 0.22);
    --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-raised: 0 8px 24px rgba(0, 0, 0, 0.55);
    --scrim: rgba(0, 0, 0, 0.6);
  }
}

/* ---- 显式主题开关（data-theme 必须双向压过媒体查询）---- */
:root[data-theme="dark"] {
  --bg: #000000;
  --bg-elevated: #1C1C1E;
  --surface: #1C1C1E;
  --surface-2: #2C2C2E;
  --label: #F2F2F7;
  --label-2: rgba(235, 235, 245, 0.6);
  --label-3: rgba(235, 235, 245, 0.3);
  --separator: rgba(84, 84, 88, 0.6);
  --fill-track: rgba(120, 120, 128, 0.32);
  --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-raised: 0 8px 24px rgba(0, 0, 0, 0.55);
  --scrim: rgba(0, 0, 0, 0.6);
}
:root[data-theme="light"] {
  --bg: #F2F2F7;
  --bg-elevated: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F2F2F7;
  --label: #1C1C1E;
  --label-2: rgba(60, 60, 67, 0.6);
  --label-3: rgba(60, 60, 67, 0.3);
  --separator: rgba(60, 60, 67, 0.29);
  --fill-track: rgba(120, 120, 128, 0.16);
  --quill: #212126;
  --quill-edge: transparent;
  --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-raised: 0 8px 24px rgba(0, 0, 0, 0.12);
  --scrim: rgba(0, 0, 0, 0.4);
}

/* ---- Motion guard（全站硬规则：reduced-motion 时动效降级）---- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    transition-property: opacity, color !important;
  }

  :where(button, a):active {
    transform: none !important;
  }

  ::view-transition-group(*),
  ::view-transition-image-pair(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}