/* ===== 设计系统 Token · 轻盈莫兰迪紫 =====
 * 全站统一变量，各页面 @import 或 <link> 引入
 * 色系：莫兰迪紫（低饱和灰紫），大面积留白，紫色仅作点缀
 */
:root {
  /* === 品牌色（莫兰迪紫）=== */
  --brand-700: #5C5473;   /* 深色文字/深色模式主色 */
  --brand-600: #7A6C99;   /* 主色 primary：按钮/图标/强调 */
  --brand-500: #9488B0;   /* hover/次级强调 */
  --brand-400: #B0A8C8;   /* 标签/图标浅色 */
  --brand-300: #C9C2DC;   /* 选中底色/浅标签 */
  --brand-200: #EDEAF4;   /* 卡片浅底/边框 */
  --brand-100: #F4F2F8;   /* 极浅底 */
  --brand-50:  #F7F6FA;   /* 页面底色 canvas */
  --brand-25:  #FBFAFC;   /* 近白 */

  /* === 中性色（带紫调的灰，不用纯灰）=== */
  --ink-900: #2A2733;     /* 主标题 */
  --ink-700: #4A4657;     /* 标题 */
  --ink-500: #75717F;     /* 正文 */
  --ink-400: #9A97A5;     /* 辅助 */
  --ink-300: #B4B2C0;     /* 占位/禁用 */
  --ink-200: #DDDCE4;     /* 边框 */
  --ink-100: #ECEDF0;     /* 浅边框/分割线 */
  --ink-50:  #F5F5F7;     /* 灰底 */

  /* === 语义色 === */
  --success: #4A8C5C;
  --success-bg: #E8F5EC;
  --warning: #C99040;
  --warning-bg: #FFF3E8;
  --error: #B84C44;
  --error-bg: #FDECEA;
  --info: #5B7FA6;
  --info-bg: #EBF2F8;

  /* === 表面 === */
  --surface: #FFFFFF;
  --bg: var(--brand-50);

  /* === 文字 === */
  --text: var(--ink-900);
  --text2: var(--ink-700);
  --text3: var(--ink-500);
  --text4: var(--ink-400);

  /* === 圆角（3档 + 胶囊）=== */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 999px;

  /* === 阴影（4级，统一紫灰色温）=== */
  --shadow-flat: 0 1px 2px rgba(42,39,51,0.04);
  --shadow-raised: 0 1px 3px rgba(42,39,51,0.05), 0 4px 12px rgba(42,39,51,0.04);
  --shadow-overlay: 0 4px 16px rgba(42,39,51,0.08), 0 2px 6px rgba(42,39,51,0.04);
  --shadow-modal: 0 8px 32px rgba(42,39,51,0.12), 0 2px 8px rgba(42,39,51,0.06);
  /* 紫色氛围阴影（仅主色按钮/选中态用） */
  --shadow-brand: 0 2px 8px rgba(122,108,153,0.24);

  /* === 字体阶调（1.2 比例）=== */
  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 17px;
  --text-xl: 20px;
  --text-2xl: 24px;

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

  /* === 主色简写（兼容旧代码）=== */
  --primary: var(--brand-600);
  --primary-light: var(--brand-200);
  --primary-dark: var(--brand-700);
  --primary-gradient: linear-gradient(135deg, var(--brand-600), var(--brand-500));

  /* === calendar / vaccine 变量映射（对齐旧 --gray-* / --radius / --shadow 命名）=== */
  --gray-50: var(--brand-50);
  --gray-100: var(--ink-100);
  --gray-200: var(--ink-200);
  --gray-300: var(--ink-300);
  --gray-400: var(--ink-400);
  --gray-500: var(--ink-500);
  --gray-700: var(--ink-700);
  --gray-900: var(--ink-900);
  --white: #FFFFFF;
  --radius: var(--radius-md);
  --shadow: var(--shadow-raised);
  --shadow-lg: var(--shadow-overlay);
}

/* === 深色模式（轻盈紫的暗色版，不过重）=== */
@media (prefers-color-scheme: dark) {
  :root {
    --brand-700: #C9C2DC;
    --brand-600: #A89CC4;
    --brand-500: #8E82AC;
    --brand-400: #6E6488;
    --brand-300: #4A4260;
    --brand-200: #352F48;
    --brand-100: #282336;
    --brand-50:  #1B1826;
    --brand-25:  #141118;

    --ink-900: #ECEAF2;
    --ink-700: #C5C2D0;
    --ink-500: #9A96A8;
    --ink-400: #75717F;
    --ink-300: #565264;
    --ink-200: #3A3746;
    --ink-100: #2C2937;
    --ink-50:  #211E2B;

    --surface: #211E2B;
    --bg: var(--brand-50);

    --shadow-flat: 0 1px 2px rgba(0,0,0,0.25);
    --shadow-raised: 0 1px 3px rgba(0,0,0,0.3), 0 4px 12px rgba(0,0,0,0.22);
    --shadow-overlay: 0 4px 16px rgba(0,0,0,0.38), 0 2px 6px rgba(0,0,0,0.28);
    --shadow-modal: 0 8px 32px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.35);
    --shadow-brand: 0 2px 8px rgba(168,156,196,0.18);
  }
}