/* ============================================================
 * OpenChat Design Tokens — 视觉灵魂
 * 
 * 设计哲学:
 *   1. 节奏感 — 4 / 8 / 12 / 16 / 20 / 24 间距网格, 呼吸一致
 *   2. 圆角语境 — 气泡/输入框/卡片/按钮 各用不同圆角, 不是全局一致
 *   3. 温度感 — 颜色不是纯饱和, 加 5-8% 灰让眼不刺
 *   4. 动效曲线 — spring-like cubic-bezier(0.16, 1, 0.3, 1)
 *   5. 触控反馈 — 按下 0.98 缩放 + 65% 透明, Apple HIG 真
 *   6. 字号梯度 — 11 / 12 / 13 / 14 / 15 / 17 / 20 / 24 / 28, 黄金比例
 *   7. 字重梯度 — 400 / 500 / 600 / 700, 不是 400 + 700 二分
 *   8. 暗色真暗 — 不是 #1C1C1E 灰, 是 #0E0F13 蓝紫黑
 * 
 * 参考: Apple HIG / Material 3 / iMessage / Linear / Vercel
 * ============================================================ */

:root {
  /* === 字体 === */
  --font-zh: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Source Han Sans", sans-serif;
  --font-en: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", sans-serif;
  --font-mono: "SF Mono", Menlo, Consolas, monospace;
  --font-stack: var(--font-zh), var(--font-en);

  /* === 字号梯度 (黄金 1.2 比例, 起点 11) === */
  --fs-2xs: 11px;   /* tabbar */
  --fs-xs:  12px;   /* 时间 / 角标 */
  --fs-sm:  13px;   /* 提示文字 */
  --fs-base: 15px;  /* 基础 */
  --fs-md:  16px;   /* 列表人名 */
  --fs-lg:  17px;   /* 顶栏标题 */
  --fs-xl:  20px;   /* 按钮 */
  --fs-2xl: 24px;   /* 大标题 */
  --fs-3xl: 28px;   /* 启动屏 */

  /* === 字重梯度 === */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold: 600;
  --fw-bold:    700;

  /* === 间距网格 (8px 节奏, 4 为半步) === */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 48px;
  --sp-10: 64px;

  /* === 圆角 (不同语境) === */
  --r-xs: 4px;     /* tag */
  --r-sm: 8px;     /* 按钮 */
  --r-md: 12px;    /* 输入框 */
  --r-lg: 16px;    /* 卡片 */
  --r-xl: 20px;    /* 大卡片 */
  --r-2xl: 24px;   /* modal */
  --r-bubble: 18px;/* 气泡 */
  --r-bubble-tail: 4px; /* 气泡尾巴 */
  --r-full: 9999px;/* pill */

  /* === 高度 === */
  --h-row: 72px;     /* 列表项 (微信/iMessage) */
  --h-header: 44px;  /* 顶栏 (iMessage 真) */
  --h-tabbar: 49px;  /* tabbar (iOS 真) */
  --h-composer: 56px;/* composer */
  --h-btn-sm: 32px;  /* 小按钮 */
  --h-btn: 40px;     /* 标准按钮 */
  --h-btn-lg: 48px;  /* 大按钮 */
  --h-input: 40px;   /* 输入框 */

  /* === 颜色 — Light (有温度, 不刺眼) === */
  --bg-base: #F7F7FA;       /* 浅蓝紫底 */
  --bg-card: #FFFFFF;        /* 卡片白 */
  --bg-elevated: #FFFFFF;    /* 浮起白 */
  --bg-subtle: #F0F0F4;      /* 极浅灰 */
  --bg-overlay: rgba(0, 0, 0, 0.45);

  --text-1: #0A0A14;         /* 主字 (不是纯黑) */
  --text-2: #3A3A45;         /* 次字 */
  --text-3: #767684;         /* 弱字 */
  --text-4: #A8A8B2;         /* 占位 */
  --text-on-brand: #FFFFFF;

  --border-1: rgba(10, 10, 20, 0.08);
  --border-2: rgba(10, 10, 20, 0.12);
  --border-3: rgba(10, 10, 20, 0.20);

  /* === 主色 — 靛蓝, 不是纯蓝 === */
  --brand-50:  #EEF1FF;
  --brand-100: #DCE3FF;
  --brand-200: #B8C5FF;
  --brand-300: #8A9DFF;
  --brand-400: #5C75FF;
  --brand-500: #3D5AFE;    /* 主色 (靛蓝) */
  --brand-600: #2C47E0;
  --brand-700: #1F35B8;
  --brand-800: #182689;
  --brand-900: #111A66;

  /* === 语义色 === */
  --success: #10B981;
  --warning: #F59E0B;
  --danger:  #EF4444;
  --danger-deep: #DC2626;

  /* === 头像渐变 (iMessage 真 — 6 种) === */
  --avatar-grad-1: linear-gradient(165deg, #6366F1, #2C5BFF);  /* 靛 */
  --avatar-grad-2: linear-gradient(165deg, #EC4899, #BE185D);  /* 粉 */
  --avatar-grad-3: linear-gradient(165deg, #14B8A6, #0F766E);  /* 青 */
  --avatar-grad-4: linear-gradient(165deg, #F59E0B, #B45309);  /* 橙 */
  --avatar-grad-5: linear-gradient(165deg, #8B5CF6, #6D28D9);  /* 紫 */
  --avatar-grad-6: linear-gradient(165deg, #06B6D4, #0E7490);  /* 天 */

  /* === 阴影 (轻, 多层) === */
  --shadow-1: 0 1px 2px rgba(10, 10, 20, 0.04);
  --shadow-2: 0 2px 8px rgba(10, 10, 20, 0.06), 0 1px 2px rgba(10, 10, 20, 0.04);
  --shadow-3: 0 4px 16px rgba(10, 10, 20, 0.08), 0 2px 4px rgba(10, 10, 20, 0.04);
  --shadow-4: 0 8px 32px rgba(10, 10, 20, 0.10), 0 4px 8px rgba(10, 10, 20, 0.06);
  --shadow-popover: 0 12px 32px rgba(10, 10, 20, 0.12), 0 4px 8px rgba(10, 10, 20, 0.06);

  /* === 动效曲线 (spring + smooth) === */
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);      /* 通用 */
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);      /* spring-like */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);  /* 弹性 */
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);

  /* === 动效时长 === */
  --t-fast: 120ms;   /* hover / press */
  --t-base: 200ms;   /* 默认 */
  --t-slow: 320ms;   /* 大动画 */
  --t-page: 480ms;   /* 页面切换 */

  /* === 高斯模糊 === */
  --blur-sm: 12px;
  --blur-md: 20px;
  --blur-lg: 32px;

  /* === Z-index 层级 === */
  --z-base: 1;
  --z-header: 50;
  --z-tabbar: 50;
  --z-dropdown: 100;
  --z-modal-mask: 1000;
  --z-modal: 1001;
  --z-toast: 2000;
}

/* === 暗色 — 蓝紫黑, 不是纯黑 === */
[data-theme="dark"] {
  --bg-base: #0E0F13;
  --bg-card: #181921;
  --bg-elevated: #232530;
  --bg-subtle: #1A1B22;
  --bg-overlay: rgba(0, 0, 0, 0.65);

  --text-1: #F4F4F8;
  --text-2: #BDBDC8;
  --text-3: #8A8A98;
  --text-4: #5A5A68;

  --border-1: rgba(255, 255, 255, 0.06);
  --border-2: rgba(255, 255, 255, 0.10);
  --border-3: rgba(255, 255, 255, 0.16);

  --brand-50:  #1F2A6B;
  --brand-100: #2A3680;
  --brand-500: #5C75FF;     /* 暗色下用亮一点 */
  --brand-600: #4A63E6;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-2: 0 2px 8px rgba(0, 0, 0, 0.40);
  --shadow-3: 0 4px 16px rgba(0, 0, 0, 0.50);
  --shadow-4: 0 8px 32px rgba(0, 0, 0, 0.60);
}