/* ═══════════════════════════════════════════════════════════════════
   SITU · Design Tokens
   ───────────────────────────────────────────────────────────────────
   单一可信来源（scale 类）。颜色和字体故意不在此处定义 —— 各 page
   保留自己的色板和字体声明（详见 Phase 1B 颜色统一）。

   规则:
     - 所有新 CSS 应使用这些 token 而不是硬编码数值
     - 旧 CSS 逐步迁移；不强制一次全替换
     - 新增 token 前先在这里看是否已有同义项
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Accent Palette · 双色板 ───────────────────────────────────
     SITU 视觉系统有两套合法 accent，按页面类型分:
       - Coral  : 主视觉页（landing / atlas / canvas / studio2 / 等
                   研究工具）—— 强烈、热烈、品牌感
       - Amber  : 辅助页（auth / store / admin / dashboard）——
                   温润、克制、信任感

     每页面在 :root 里只引用其中一组，**不要混用**。如需引用另一
     组的 CTA 强调（比如 amber 页里偶尔需要 coral 按钮），用完整
     变量名 `var(--accent-coral)` 而不是 `--aura`。

     扩展时新增色阶请加在这里，禁止 page 内硬编码 hex。           */

  /* — Coral 系（夕阳红 / 砖红）— */
  --accent-coral:        #ee4e0e;
  --accent-coral-bright: #ff7a47;
  --accent-coral-deep:   #b8330a;
  --accent-coral-soft:   #ff8a5c;
  --accent-coral-amber:  #d04210;  /* landing 用作 route line 强调 */
  --accent-coral-clay:   #7e2906;  /* landing 用作 rammed earth 深底 */
  --accent-coral-rgb:    238, 78, 14;

  /* — Amber 系（琥珀金 / 蜜色）— */
  --accent-amber:        #c8912f;
  --accent-amber-bright: #f2c47a;
  --accent-amber-deep:   #a06a1a;
  --accent-amber-soft:   #d8b069;
  --accent-amber-edge:   rgba(200, 145, 47, 0.32);  /* 半透明边框 */
  --accent-amber-rgb:    200, 145, 47;

  /* ── Border Radius — 5 档：从微到圆 ────────────────────────────
     现有用法 13 种（1/2/3/4/5/6/7/8/9/10/12/14/99/999）归并到 5 种
     映射建议:
       1-4px  → --r-xs
       5-7px  → --r-sm
       8-10px → --r-md
       12-16px → --r-lg
       99+    → --r-pill                                            */
  --r-xs:    4px;
  --r-sm:    6px;
  --r-md:    10px;
  --r-lg:    14px;
  --r-pill:  999px;

  /* ── Spacing — 4px base scale ─────────────────────────────────
     替代原来散落各处的裸 px。每档对应一个语义层级:
       --s-1 (4px)  : 微调（icon 内边距、hairline）
       --s-2 (8px)  : 紧凑（按钮内 gap、tag 内边距）
       --s-3 (12px) : 标准（卡片内项目间距）
       --s-4 (16px) : 模块（卡片标题与正文）
       --s-5 (20px) : 中等（按钮上下边距）
       --s-6 (24px) : 大（section 内组件间距）
       --s-8 (32px) : 超大（section 标题与内容）
       --s-10 (40px): 章节（panel 内边距）
       --s-12 (48px): 区段（hero 上下边距）
       --s-16 (64px): 大区段（landing block 之间）
       --s-20 (80px): 超大区段
       --s-24 (96px): hero 级别                                    */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   20px;
  --s-6:   24px;
  --s-8:   32px;
  --s-10:  40px;
  --s-12:  48px;
  --s-16:  64px;
  --s-20:  80px;
  --s-24:  96px;

  /* ── Shadow — 4 档，越大越远越柔 ────────────────────────────────
     现有 --shadow-1/2/3 已在 landing 定义；这里统一并补一档悬浮态
       --elev-flat   : 无阴影（卡片默认）
       --elev-hover  : 轻微浮起（hover）
       --elev-raised : 卡片悬停、popover
       --elev-overlay: modal、drawer
       --elev-cinema : 大画面（如 Knowledge Graph dialog）         */
  --elev-flat:    0 1px 2px rgba(20, 12, 4, 0.04);
  --elev-hover:   0 4px 12px rgba(20, 12, 4, 0.08);
  --elev-raised:  0 8px 24px rgba(20, 12, 4, 0.14);
  --elev-overlay: 0 16px 40px rgba(20, 12, 4, 0.20);
  --elev-cinema:  0 24px 60px rgba(20, 12, 4, 0.28);

  /* ── Transition — duration ────────────────────────────────────
     替代散落的 120ms / 140ms / 160ms / 200ms / 220ms / 240ms ...
     选择规则：
       --dur-instant : 即时反馈（按钮按下、tooltip 出现）
       --dur-fast    : 普通过渡（hover 色变、margin 变化）
       --dur-base    : 标准切换（tab 切换、抽屉弹出）
       --dur-slow    : 大幅过渡（页面切换、modal）
       --dur-cinema  : 叙事级（landing 入场、滚动驱动）            */
  --dur-instant: 100ms;
  --dur-fast:    200ms;
  --dur-base:    320ms;
  --dur-slow:    600ms;
  --dur-cinema:  1200ms;

  /* ── Transition — easing ──────────────────────────────────────
     全站统一三种 curve。再有诡异 cubic-bezier 数值的请先来这里查
       --ease         : 通用平滑（默认）
       --ease-out     : 进入（菜单弹出、popover）
       --ease-spring  : 带弹性（hover、激活）                       */
  --ease:        cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-out:    cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Typography — size scale ─────────────────────────────────
     8 档够整站用。命名遵循 Tailwind 风格便于记忆
       --t-xs   : 标签 / 元数据 / footnote
       --t-sm   : 副标题 / 表格内容
       --t-base : 正文（默认）
       --t-md   : 强调正文 / 卡片标题
       --t-lg   : 小标题（section heading）
       --t-xl   : 模块标题
       --t-2xl  : 页面副标题 / Modal 标题
       --t-3xl  : 页面标题（hero 之外）
       --t-hero : Hero 大标题                                       */
  --t-xs:    11px;
  --t-sm:    13px;
  --t-base:  15px;
  --t-md:    17px;
  --t-lg:    20px;
  --t-xl:    24px;
  --t-2xl:   32px;
  --t-3xl:   42px;
  --t-hero:  64px;

  /* ── Typography — line height ────────────────────────────────
     用法配对:
       --lh-tight : 大标题、单行文本
       --lh-base  : 正文（默认）
       --lh-loose : 长段落、中文（中文需要更松）                  */
  --lh-tight: 1.2;
  --lh-base:  1.5;
  --lh-loose: 1.75;

  /* ── Typography — letter spacing ─────────────────────────────
       --ls-tight   : 大标题（如 hero）
       --ls-normal  : 正文（默认）
       --ls-wide    : 标签 / 元数据（结合大写）
       --ls-display : 等宽元数据                                  */
  --ls-tight:    -0.02em;
  --ls-normal:   0;
  --ls-wide:     0.08em;
  --ls-display:  0.28em;

  /* ── Z-Index — 显式层级 ────────────────────────────────────────
     替代散落的 1 / 2 / 6 / 9 / 10 / 50 / 100 / 999 / 9000 / 9999
       --z-base    : 默认（卡片相互堆叠）
       --z-raised  : hover 浮起
       --z-sticky  : 顶栏、底栏
       --z-popover : dropdown、tooltip
       --z-drawer  : 侧边抽屉、modal 内层
       --z-modal   : 模态对话框、全屏 overlay
       --z-toast   : 通知、最顶层 popup                            */
  --z-base:    1;
  --z-raised:  10;
  --z-sticky:  100;
  --z-popover: 1000;
  --z-drawer:  5000;
  --z-modal:   8000;
  --z-toast:   9000;

  /* ── Layout — container widths ─────────────────────────────────
     landing pages 已有 --col-narrow / wide / page；这里复用同样数值
     做为全站通用，避免不同 page 重复定义                          */
  --w-narrow: 680px;
  --w-mid:    900px;
  --w-wide:   1200px;
  --w-full:   1440px;
}

/* ── prefers-reduced-motion ───────────────────────────────────────
   尊重操作系统的减少动效偏好。所有 token 化的 duration 归零。     */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms;
    --dur-fast:    0ms;
    --dur-base:    0ms;
    --dur-slow:    0ms;
    --dur-cinema:  0ms;
  }
}