/* ============================================================
   庭院 · 色彩与尺度系统
   Moonlit Courtyard — Design Tokens
   ------------------------------------------------------------
   这套 token 是庭院的身份。所有空间、组件、动效都必须从这里取值，
   不允许在别处写死颜色。
   ============================================================ */

:root {
  color-scheme: dark;

  /* ── 月夜 · 底色 ─────────────────────────────────────────
     背景、导航、主要空间。越往下越深，像夜色沉下去。 */
  --night-1000: #06080f;
  --night-900:  #0a0d16;
  --night-800:  #0e1220;
  --night-700:  #141a2c;
  --night-600:  #1a2136;
  --night-500:  #232c47;

  /* ── 月光 · 文字 ─────────────────────────────────────────
     柔和的米白 / 银白。主要文字、标题、重要信息。 */
  --moon-100: #f5f1e6;
  --moon-200: #ddd8ca;
  --moon-300: #a9a49a;
  --moon-400: #7b766e;

  /* ── 领域色（低饱和，克制） ──────────────────────────────
     月痕  → 生活运营、长期成长、月相
     微光  → 奖励、微光币、重要操作、灯光
     庭院绿→ 植物、健康、成长、自然
     水鸭绿→ 娱乐、兴趣、轻松内容
     玫红  → 健康管理中的重要状态
     蓝    → 财务
     绿    → 工作 / 学习
     橙    → 社交
     红    → 只用于重大事件、危险状态 */
  --c-moontrace: #9d92d8;
  --c-glimmer:   #e2bd7c;
  --c-garden:    #7ba07f;
  --c-teal:      #6f9d97;
  --c-rose:      #c47b93;
  --c-blue:      #7d9ccb;
  --c-green:     #8aab6d;
  --c-orange:    #cb9463;
  --c-red:       #c96055;

  /* 领域色的极淡底衬，用于空间页面的氛围，不做高亮 */
  --c-moontrace-wash: rgba(157, 146, 216, 0.10);
  --c-glimmer-wash:   rgba(226, 189, 124, 0.10);
  --c-garden-wash:    rgba(123, 160, 127, 0.10);
  --c-teal-wash:      rgba(111, 157, 151, 0.10);
  --c-rose-wash:      rgba(196, 123, 147, 0.10);
  --c-blue-wash:      rgba(125, 156, 203, 0.10);
  --c-green-wash:     rgba(138, 171, 109, 0.10);
  --c-orange-wash:    rgba(203, 148, 99, 0.10);

  /* ── 面 ──────────────────────────────────────────────────
     庭院里没有"卡片墙"。面是薄薄的一层夜雾，靠发丝线分层。 */
  --s-1: rgba(255, 255, 255, 0.032);
  --s-2: rgba(255, 255, 255, 0.055);
  --s-3: rgba(255, 255, 255, 0.082);
  --line:   rgba(255, 255, 255, 0.075);
  --line-2: rgba(255, 255, 255, 0.14);

  /* ── 圆角 ── */
  --r-xs: 7px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* ── 间距 ── */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 22px;
  --s6: 30px;
  --s7: 42px;
  --s8: 60px;

  /* ── 字号 ── */
  --t-xs:   11px;
  --t-sm:   12.5px;
  --t-base: 14.5px;
  --t-md:   16px;
  --t-lg:   20px;
  --t-xl:   26px;
  --t-2xl:  34px;

  /* ── 字体 ─────────────────────────────────────────────────
     世界与标题用衬线（安静、有纸感），数据与控件用无衬线。 */
  --font-serif: "Songti SC", "Noto Serif SC", "Source Han Serif SC", "STSong",
                "SimSun", Georgia, "Times New Roman", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC",
               "HarmonyOS Sans SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ── 动效 ─────────────────────────────────────────────────
     全部克制。没有任何一个动效是为了"炫"，只是让庭院在呼吸。 */
  --e1: 160ms;
  --e2: 300ms;
  --e3: 560ms;
  --e-breathe: 7200ms;
  --e-sway: 11000ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ── 层级 ── */
  --z-scene: 0;
  --z-shell: 3;
  --z-nav: 5;
  --z-overlay: 20;
  --z-toast: 30;

  /* ── 安全区 ── */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);

  /* ── 布局 ── */
  --shell-w: 470px;
  --aside-w: 268px;
}

/* 尊重用户的"减少动态效果"设置：庭院停止呼吸，但依然完整 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

html[data-motion="still"] *, html[data-motion="still"] *::before, html[data-motion="still"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}