/* 家人守护 · 老人端启动流程 — 设计令牌
   调性：安心可靠 + 温暖治愈 · 受众：55-90 岁
   原则：高对比 / 大字号 / 大触点 / 圆润形态 / 温暖中性 */

:root {
  /* — 表面 — */
  --bg:         oklch(98% 0.004 80);   /* 暖白底，比纸再暖一点 */
  --surface:    oklch(100% 0 0);        /* 纯白卡片 */
  --surface-2:  oklch(96% 0.006 80);   /* 二级表面 */
  --surface-3:  oklch(93% 0.008 80);   /* 输入框/分割 */

  /* — 文本 — */
  --fg:         oklch(22% 0.012 200);  /* 主文本 — 偏冷的近黑，增加对比 */
  --fg-2:       oklch(36% 0.012 200);  /* 副标题 */
  --muted:      oklch(52% 0.012 200);  /* 辅助文字 */
  --placeholder:oklch(68% 0.010 200);

  /* — 品牌 — */
  --brand:      oklch(48% 0.085 165);  /* 守护绿 — 安心、像橄榄叶 */
  --brand-2:    oklch(58% 0.090 165);  /* 次级绿 */
  --brand-soft: oklch(94% 0.025 165);  /* 绿色软背景 */
  --brand-ink:  oklch(28% 0.060 165);  /* 深绿文字 */

  /* — 强调 — */
  --warm:       oklch(70% 0.16 35);    /* 温暖珊瑚 — SOS / 家人温度 */
  --warm-soft:  oklch(95% 0.040 35);
  --warm-ink:   oklch(40% 0.12 35);

  /* — 语义 — */
  --danger:     oklch(60% 0.22 25);
  --success:    oklch(56% 0.14 150);
  --warning:    oklch(72% 0.15 75);

  /* — 描边 — */
  --border:     oklch(90% 0.006 200);
  --border-2:   oklch(85% 0.008 200);

  /* — 字体（系统中文优先，保证老人机渲染） — */
  --font-display: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', system-ui, sans-serif;
  --font-body:    -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', system-ui, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;

  /* — 字号（老人端基准，body 20px 起步） — */
  --fs-mega:    44px;   /* 大标题 / 启动 slogan */
  --fs-title:   32px;   /* 页面标题 */
  --fs-h2:      26px;   /* 二级 */
  --fs-h3:      22px;   /* 三级 */
  --fs-body:    20px;   /* 正文（老人端基准） */
  --fs-body-s:  18px;   /* 次要正文（不得更小） */
  --fs-caption: 16px;   /* 仅用于辅助说明 */

  /* — 间距 — */
  --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: 56px;

  /* — 圆角 — */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 9999px;

  /* — 阴影 — */
  --shadow-1: 0 1px 2px oklch(0% 0 0 / 0.04), 0 4px 12px oklch(0% 0 0 / 0.04);
  --shadow-2: 0 4px 12px oklch(0% 0 0 / 0.06), 0 12px 32px oklch(0% 0 0 / 0.06);
  --shadow-brand: 0 12px 28px oklch(48% 0.085 165 / 0.30);
  --shadow-warm:  0 12px 28px oklch(70% 0.16 35 / 0.32);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--fg);
  background: oklch(96% 0.005 220);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }