/* ============================================================
   安愈 · 设计令牌 (Design Tokens)
   治愈系视觉体系：青瓷雾色 + 暖砂 + 月白
   浅色为基准；深色在 media 与 [data-theme] 双通道覆盖
   ============================================================ */

:root {
  /* ---- 品牌色：青瓷雾青 ---- */
  --brand-50:  #EDF4F2;
  --brand-100: #DAE9E5;
  --brand-200: #BCD7D0;
  --brand-300: #9BC2B8;
  --brand-400: #7FAAA0;
  --brand-500: #6F9E94;   /* 主色 */
  --brand-600: #5A8880;
  --brand-700: #476E67;
  --brand-800: #37544F;

  /* ---- 暖砂（会员 / 强调） ---- */
  --sand-100: #F6EEE1;
  --sand-300: #E4CFAE;
  --sand-500: #C9A87C;
  --sand-700: #A6825A;

  /* ---- 情绪辅助色（分类识别） ---- */
  --hue-sleep:  #8FA6C9;  /* 睡眠 · 夜蓝 */
  --hue-focus:  #7FB0A6;  /* 高频 · 青 */
  --hue-purify: #A9BE8E;  /* 净化 · 草绿 */
  --hue-family: #D9A8A8;  /* 亲子 · 藕粉 */
  --hue-pure:   #B7C9DF;  /* 纯净音乐 */
  --hue-guqin:  #CDBBA0;  /* 古琴音乐 */
  --hue-nature: #A7C6A4;  /* 自然之声 */

  /* ---- 中性 ---- */
  --ink:        #232B29;
  --ink-2:      #4A5754;
  --ink-3:      #7B8A86;
  --ink-4:      #A9B5B1;
  --line:       #E3E9E6;
  --line-soft:  #EEF2F0;

  /* ---- 表面 ---- */
  --bg:         #F5F8F6;
  --bg-2:       #EEF3F1;
  --surface:    #FFFFFF;
  --surface-2:  #FAFCFB;
  --overlay:    rgba(18, 30, 28, .46);
  --glass:      rgba(255, 255, 255, .74);
  --glass-strong: rgba(245, 248, 246, .96);
  --glass-line: rgba(255, 255, 255, .55);

  /* 图上反白文字 */
  --on-art:      #FFFFFF;
  --on-art-2:    rgba(255, 255, 255, .82);
  --on-art-scrim: linear-gradient(180deg, rgba(12,24,22,0) 0%, rgba(12,24,22,.16) 38%, rgba(12,24,22,.62) 100%);

  /* ---- 状态 ---- */
  --ok:      #5B9A72;
  --warn:    #C98F4A;
  --danger:  #C2705F;

  /* ---- 圆角 ---- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 26px;
  --r-pill: 999px;

  /* ---- 阴影（柔和、无硬边） ---- */
  --sh-1: 0 1px 2px rgba(35, 51, 48, .05), 0 2px 8px rgba(35, 51, 48, .05);
  --sh-2: 0 2px 6px rgba(35, 51, 48, .06), 0 10px 24px rgba(35, 51, 48, .08);
  --sh-3: 0 8px 20px rgba(35, 51, 48, .10), 0 24px 48px rgba(35, 51, 48, .12);
  --sh-brand: 0 6px 18px rgba(111, 158, 148, .32);

  /* ---- 间距 ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;

  /* ---- 字体 ---- */
  --font-serif: "Songti SC", "STSong", "Noto Serif CJK SC", "Source Han Serif SC", "SimSun", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "HarmonyOS Sans SC",
               "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;

  --fs-display: 30px;
  --fs-h1: 24px;
  --fs-h2: 19px;
  --fs-h3: 16px;
  --fs-body: 15px;
  --fs-sm: 13px;
  --fs-xs: 11px;

  /* ---- 动效 ---- */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-1: .18s;
  --dur-2: .3s;
  --dur-3: .55s;

  /* ---- 布局 ---- */
  --app-max: 480px;
  --tabbar-h: 58px;
  --mini-h: 60px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

/* ---- 深色模式（系统偏好；显式 light 时不生效） ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand-50:  #1B2A28;
    --brand-100: #223835;
    --brand-200: #2E4A46;
    --brand-300: #3F6159;
    --brand-400: #5E8B82;
    --brand-500: #7FB3A8;
    --brand-600: #93C3B8;
    --brand-700: #AED5CB;
    --brand-800: #C9E4DC;

    --sand-100: #2A241B;
    --sand-300: #6E5A3D;
    --sand-500: #C4A67E;
    --sand-700: #DCC6A2;

    --ink:       #E7EFEC;
    --ink-2:     #C2CFCB;
    --ink-3:     #93A29E;
    --ink-4:     #6C7A76;
    --line:      #26332F;
    --line-soft: #1E2A27;

    --bg:        #0E1614;
    --bg-2:      #121D1A;
    --surface:   #16211E;
    --surface-2: #1A2724;
    --overlay:   rgba(0, 0, 0, .6);
    --glass:      rgba(22, 33, 30, .78);
    --glass-strong: rgba(14, 22, 20, .96);
    --glass-line: rgba(255, 255, 255, .08);

    --sh-1: 0 1px 2px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.24);
    --sh-2: 0 2px 6px rgba(0,0,0,.34), 0 10px 24px rgba(0,0,0,.3);
    --sh-3: 0 8px 20px rgba(0,0,0,.42), 0 24px 48px rgba(0,0,0,.38);
    --sh-brand: 0 6px 18px rgba(0, 0, 0, .45);
  }
}

/* ---- 深色模式（显式切换，优先级最高） ---- */
:root[data-theme="dark"] {
  --brand-50:  #1B2A28;
  --brand-100: #223835;
  --brand-200: #2E4A46;
  --brand-300: #3F6159;
  --brand-400: #5E8B82;
  --brand-500: #7FB3A8;
  --brand-600: #93C3B8;
  --brand-700: #AED5CB;
  --brand-800: #C9E4DC;

  --sand-100: #2A241B;
  --sand-300: #6E5A3D;
  --sand-500: #C4A67E;
  --sand-700: #DCC6A2;

  --ink:       #E7EFEC;
  --ink-2:     #C2CFCB;
  --ink-3:     #93A29E;
  --ink-4:     #6C7A76;
  --line:      #26332F;
  --line-soft: #1E2A27;

  --bg:        #0E1614;
  --bg-2:      #121D1A;
  --surface:   #16211E;
  --surface-2: #1A2724;
  --overlay:   rgba(0, 0, 0, .6);
  --glass:      rgba(22, 33, 30, .78);
  --glass-strong: rgba(14, 22, 20, .96);
  --glass-line: rgba(255, 255, 255, .08);

  --sh-1: 0 1px 2px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.24);
  --sh-2: 0 2px 6px rgba(0,0,0,.34), 0 10px 24px rgba(0,0,0,.3);
  --sh-3: 0 8px 20px rgba(0,0,0,.42), 0 24px 48px rgba(0,0,0,.38);
  --sh-brand: 0 6px 18px rgba(0, 0, 0, .45);
}

/* ---- 字号档位（设置页可调） ---- */
:root[data-fs="s"]  { --fs-display: 27px; --fs-h1: 22px; --fs-h2: 17px; --fs-h3: 15px; --fs-body: 14px; --fs-sm: 12px; --fs-xs: 11px; }
:root[data-fs="l"]  { --fs-display: 33px; --fs-h1: 26px; --fs-h2: 21px; --fs-h3: 18px; --fs-body: 17px; --fs-sm: 15px; --fs-xs: 13px; }
:root[data-fs="xl"] { --fs-display: 36px; --fs-h1: 29px; --fs-h2: 23px; --fs-h3: 20px; --fs-body: 19px; --fs-sm: 16px; --fs-xs: 14px; }