/* ============================================================
   knowself · Design Tokens  —  单一来源 (Single Source of Truth)
   ------------------------------------------------------------
   颜色基于 Radix Colors 方法论：每色 12 阶语义化
     · 1–2   App / 页面背景
     · 3–5   组件背景 (默认 / hover / active)
     · 6–8   边框 (subtle / default / strong)
     · 9–10  实色填充 (品牌按钮 / 强调)
     · 11    低对比文字 (次要)
     · 12    高对比文字 (正文 / 标题)
   组件层落地：iOS = Apple HIG + SF Symbols / Android = Material 3 + Material Symbols
   原型与规范共用本文件；原生端按 design-system.html 的"平台映射"转译。
   ============================================================ */

/* light 值同时挂到 [data-theme="light"]，使「子树就近翻面」在 dark 祖先下也能翻回亮色 */
:root, [data-theme="light"] {
  /* ---------- 中性灰阶 · Radix Slate (light) ---------- */
  --gray-1:#fbfcfd;  --gray-2:#f8f9fa;  --gray-3:#f1f3f5;  --gray-4:#eceef0;
  --gray-5:#e6e8eb;  --gray-6:#dfe3e6;  --gray-7:#d7dbdf;  --gray-8:#c1c8cd;
  --gray-9:#889096;  --gray-10:#7e868c; --gray-11:#687076; --gray-12:#11181c;

  /* ---------- 品牌蓝 · 锚定 App 既有品牌色, 按 Radix 阶方法补全 ---------- */
  --brand-2:#f5f9ff;  --brand-3:#e9f1ff;  --brand-4:#dceafe;  --brand-5:#d3e2fd;
  --brand-6:#bcd3fb;  --brand-7:#9dbef7;  --brand-8:#6fa0f2;
  --brand-9:#2f7bf5;  --brand-10:#1f6bea; --brand-11:#1f63d6; --brand-12:#0c2c66;

  /* ---------- AI 强调青 · Radix Cyan (light) ---------- */
  --ai-2:#f2fafb;  --ai-3:#def7f9;  --ai-4:#caf1f6;  --ai-6:#9ddde7;
  --ai-8:#3db9cf;  --ai-9:#00a2c7;  --ai-10:#0797b9; --ai-11:#107d98; --ai-12:#0d3c48;

  /* ---------- 语义色 ---------- */
  --warning-2:#fefbe9;  --warning-9:#ffc53d;  --warning-11:#ab6400;   /* Radix Amber  */
  --danger-3:#feebe7;   --danger-9:#e54d2e;   --danger-11:#ca3214;    /* Radix Tomato */
  --success-3:#e6f6eb;  --success-9:#30a46c;  --success-11:#218358;   /* Radix Grass  */

  /* ---------- 间距 · 4pt 阶梯 ---------- */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-7:32px; --space-8:40px;

  /* ---------- 圆角 ---------- */
  --radius-1:4px; --radius-2:6px; --radius-3:8px; --radius-4:12px; --radius-5:16px; --radius-round:999px;

  /* ---------- 字号 · iOS Type Ramp (pt) ---------- */
  --text-caption2:11px;  --text-caption:12px;  --text-footnote:13px;  --text-subhead:15px;
  --text-body:17px;      --text-title3:20px;   --text-title2:22px;    --text-title1:28px;
  --weight-regular:400;  --weight-medium:500;  --weight-semibold:600; --weight-bold:700;

  /* ---------- 阴影 · 克制 ---------- */
  --shadow-1:0 1px 2px rgba(16,24,40,.06);
  --shadow-2:0 4px 12px -2px rgba(16,24,40,.10);
  --shadow-3:0 12px 32px -8px rgba(16,24,40,.18);

  /* ---------- 字体 · 平台系统字 (反 AI-slop: 还原真实 App) ---------- */
  --font-sys:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue","Microsoft YaHei",sans-serif;
  --font-mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,monospace;

  /* ---------- 主题平滑过渡 (供 [data-theme] 切换用) ---------- */
  --ease-theme:160ms cubic-bezier(.4,0,.2,1);
}

/* ============================================================
   暗色主题  —  [data-theme="dark"]
   ------------------------------------------------------------
   只翻颜色值, 不翻语义: 每色第 N 阶的「用途」与亮色完全一致
     · gray-1/2  仍是 App/页面背景 (此处变为最暗)
     · gray-3-5  仍是组件背景
     · gray-6-8  仍是边框
     · gray-9-10 仍是实色/禁用
     · gray-11   仍是次要文字   · gray-12 仍是正文 (此处变为最亮)
   所以引用 var(--gray-1)/var(--gray-12) 的组件无需改写, 翻面即用。
   色阶取自 Radix Colors dark (Slate / Blue / Cyan / Amber / Tomato / Grass)。
   ============================================================ */
[data-theme="dark"] {
  /* ---------- 中性灰阶 · Radix Slate (dark) ---------- */
  --gray-1:#111113;  --gray-2:#18191b;  --gray-3:#212225;  --gray-4:#272a2d;
  --gray-5:#2e3135;  --gray-6:#363a3f;  --gray-7:#43484e;  --gray-8:#5a6169;
  --gray-9:#696e77;  --gray-10:#777b84; --gray-11:#b0b4ba; --gray-12:#edeef0;

  /* ---------- 品牌蓝 · Radix Blue (dark), 实色阶锚定品牌 #2f7bf5 ---------- */
  --brand-2:#0f1b2d;  --brand-3:#10243e;  --brand-4:#102a4c;  --brand-5:#0f3058;
  --brand-6:#123963;  --brand-7:#1b4571;  --brand-8:#2657a6;
  --brand-9:#2f7bf5;  --brand-10:#4f90f7; --brand-11:#8cc0ff; --brand-12:#c2ddff;

  /* ---------- AI 强调青 · Radix Cyan (dark), 实色阶锚定 #00a2c7 ---------- */
  --ai-2:#0b1d22;  --ai-3:#082c36;  --ai-4:#003848;  --ai-6:#045468;
  --ai-8:#11809c;  --ai-9:#00a2c7;  --ai-10:#23afd0; --ai-11:#4ccce6; --ai-12:#b6ecf7;

  /* ---------- 语义色 (dark) ---------- */
  --warning-2:#271700;  --warning-9:#ffc53d;  --warning-11:#f1a10d;   /* Amber dark  */
  --danger-3:#3b1219;   --danger-9:#e54d2e;   --danger-11:#ff977d;    /* Tomato dark */
  --success-3:#1b2a1e;  --success-9:#30a46c;  --success-11:#71d083;   /* Grass dark  */

  /* ---------- 阴影 · 暗色下用更深的投影 ---------- */
  --shadow-1:0 1px 2px rgba(0,0,0,.40);
  --shadow-2:0 4px 12px -2px rgba(0,0,0,.55);
  --shadow-3:0 12px 32px -8px rgba(0,0,0,.70);
}