/* =============================================================================
   麻将算钱 · Design Tokens (CSS Variables)
   设计师：颜好看 | 寄存器：Product（工具型）| 主题：中性底 + Indigo 纯色强调
   规则：组件代码只允许引用 var()，禁止硬编码色值（例外仅 #fff / #000）。
   ============================================================================= */

:root {
  /* ---------- A1 Identity · 表面层 (Surface) ---------- */
  --color-bg: #F6F7F9;            /* 页面背景：冷调中性灰 */
  --color-surface: #FFFFFF;       /* 卡片/容器背景 */
  --color-surface-2: #EEF1F5;     /* 次级表面（输入框禁用、分组底） */
  --color-surface-3: #E6EAF0;     /* 三级表面（选中态淡底） */

  /* ---------- A1 Identity · 前景层 (Foreground) ---------- */
  --color-fg: #11161D;            /* 主文本 */
  --color-fg-2: #3A4250;          /* 次级文本/小标题 */
  --color-muted: #6B7480;         /* 辅助文本 */
  --color-meta: #9AA2AE;          /* 元数据/占位 */

  /* ---------- A1 Identity · 边框层 (Border) ---------- */
  --color-border: #DDE2E9;        /* 默认边框 */
  --color-border-strong: #C3CAD4; /* 强边框（输入聚焦前） */
  --color-border-soft: #EDF0F4;   /* 内部行分隔 */

  /* ---------- A1 Identity · 强调色 (Accent = 纯色 Indigo) ---------- */
  --color-accent: #4F46E5;        /* 品牌强调：纯色，禁止渐变 */
  --color-accent-hover: #4338CA;
  --color-accent-active: #3730A3;
  --color-accent-contrast: #FFFFFF;
  --color-accent-soft: #EEF2FF;   /* 次级按钮/选中淡底 */
  --color-accent-soft-hover: #E0E7FF;

  /* ---------- A2 Semantic · 语义色 ---------- */
  --color-success: #15803D;       /* 成功/正向 */
  --color-warn: #B45309;          /* 警告 */
  --color-danger: #DC2626;        /* 危险/错误 */
  --color-info: #2563EB;          /* 信息 */

  /* 资金语义色（核心）：应付=支出警示，应收=收入正向 */
  --color-pay: #C2410C;           /* 应付 / 支出：橙红纯色（≥4.5:1 on #fff） */
  --color-pay-soft: #FCEEE6;      /* 应付淡底 */
  --color-receive: #15803D;       /* 应收 / 收入：绿纯色 */
  --color-receive-soft: #E7F4EC;  /* 应收淡底 */

  /* ---------- B-slot · 别名 ---------- */
  --color-fg-2: var(--color-fg-2);
  --color-surface-warm: var(--color-surface-2);
  --color-meta: var(--color-meta);
  --color-accent-hover: var(--color-accent-hover);

  /* ---------- A2 Structure · 间距 (4px 网格) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---------- A2 Structure · 圆角 ---------- */
  --radius-sm: 8px;    /* 按钮/输入框/小元素 */
  --radius-md: 12px;   /* 卡片 */
  --radius-lg: 16px;   /* 模态/大容器 */
  --radius-full: 9999px;

  /* ---------- A2 Structure · 阴影层级 (flat/ring/raised) ---------- */
  --shadow-flat: none;
  --shadow-ring: 0 0 0 1px var(--color-border);
  --shadow-raised: 0 1px 2px rgba(17, 22, 29, 0.04), 0 6px 16px rgba(17, 22, 29, 0.06);
  --shadow-modal: 0 10px 40px rgba(17, 22, 29, 0.16);

  /* ---------- Typography · 字体栈 ---------- */
  --font-display: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'Roboto Mono', ui-monospace, monospace; /* 金额/数字 */

  /* ---------- Typography · 字号阶梯 (8 级) ---------- */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 32px;
  --text-4xl: 40px;

  /* ---------- Typography · 行高 ---------- */
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* ---------- Typography · 字距 ---------- */
  --tracking-display: -0.02em;
  --tracking-caps: 0.06em;
  --tracking-normal: 0;

  /* ---------- Typography · 字重 (3 级, Inter 可变字体支持) ---------- */
  --weight-regular: 400;
  --weight-medium: 510;
  --weight-semibold: 590;

  /* ---------- Focus & Motion ---------- */
  --focus-ring: 0 0 0 3px rgba(79, 70, 229, 0.32);
  --focus-ring-danger: 0 0 0 3px rgba(220, 38, 38, 0.28);
  --motion-fast: 120ms;   /* 即时反馈 hover */
  --motion-base: 150ms;    /* 确认/状态收敛值 */
  --motion-enter: 220ms;   /* 内容进入 */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);

  /* ---------- Layout ---------- */
  --container-max: 1040px;
  --container-gutter: 24px;
  --section-y: 32px;
  --nav-h: 56px;
  --tabbar-h: 60px;

  /* ---------- Icon Size ---------- */
  --icon-sm: 16px;  /* 行内 */
  --icon-md: 20px;  /* 按钮内 */
  --icon-lg: 24px;  /* 独立图标 */

  /* ---------- z-index ---------- */
  --z-base: 0;
  --z-sticky: 100;
  --z-dropdown: 1000;
  --z-modal: 1100;
  --z-toast: 1200;
}

/* ============================ 深色主题 ============================ */
:root[data-theme="dark"] {
  --color-bg: #0E1116;
  --color-surface: #161B22;
  --color-surface-2: #1C222B;
  --color-surface-3: #232B36;

  --color-fg: #E8ECF2;
  --color-fg-2: #B4BCC8;
  --color-muted: #8A93A1;
  --color-meta: #626B79;

  --color-border: #2A323D;
  --color-border-strong: #3A434F;
  --color-border-soft: #20272F;

  --color-accent: #6366F1;
  --color-accent-hover: #818CF8;
  --color-accent-active: #A5B4FC;
  --color-accent-contrast: #0E1116;
  --color-accent-soft: #1E2233;
  --color-accent-soft-hover: #272C42;

  --color-success: #4ADE80;
  --color-warn: #FBBF24;
  --color-danger: #F87171;
  --color-info: #60A5FA;

  --color-pay: #FB923C;        /* 深底下改用更亮的橙，保证对比 */
  --color-pay-soft: #2E1F14;
  --color-receive: #4ADE80;
  --color-receive-soft: #14241A;

  --shadow-flat: none;
  --shadow-ring: 0 0 0 1px var(--color-border);
  --shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 18px rgba(0, 0, 0, 0.5);
  --shadow-modal: 0 12px 48px rgba(0, 0, 0, 0.6);

  --focus-ring: 0 0 0 3px rgba(99, 102, 241, 0.45);
  --focus-ring-danger: 0 0 0 3px rgba(248, 113, 113, 0.4);
}