/* WebPeek · Viewfinder Design System v1.0 — 设计令牌（仅浅色主题） */
:root {
  /* 表面与文字 */
  --wp-bg: #F6F5F2;        /* 页面底色：暖纸色 */
  --wp-surface: #FFFFFF;   /* 卡片、表格、弹层 */
  --wp-surface-2: #EFEDE8; /* 次级底色、悬停 */
  --wp-border: #E3E0D8;
  --wp-text-1: #1A1A17;
  --wp-text-2: #5E5B53;
  --wp-text-3: #6E6A61;    /* 满足 4.5:1 对比度 */

  /* 品牌 Peek Teal */
  --wp-primary: #0F766E;
  --wp-primary-hover: #115E59;
  --wp-primary-tint: #E6F2F0;
  --wp-primary-light: #2DD4BF;   /* 仅用于渐变、光晕 */
  --wp-glow-mint: #CCFBF1;
  --wp-glow-teal: #99F6E4;
  --wp-glow-warm: #FDE68A;

  /* 状态 */
  --wp-success: #15803D; --wp-success-tint: #E8F5EC;
  --wp-warning: #B45309; --wp-warning-tint: #FDF3E3;
  --wp-danger:  #B91C1C; --wp-danger-tint:  #FBEAEA;
  --wp-info:    #1D4ED8; --wp-info-tint:    #E8EEFB;

  /* 文件类型色（类型图标块 + 类型标签） */
  --wp-type-word:    #2563EB;
  --wp-type-pdf:     #DC2626;
  --wp-type-sheet:   #16A34A;
  --wp-type-image:   #9333EA;
  --wp-type-text:    #0891B2; /* 文本 / JSON / 代码 */
  --wp-type-archive: #CA8A04;
  --wp-type-exe:     #475569;
  --wp-type-media:   #DB2777;
  --wp-type-other:   #78716C;

  /* 字体 */
  --wp-font-sans: "Inter", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --wp-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --wp-fs-12: 12px; --wp-fs-13: 13px; --wp-fs-14: 14px; --wp-fs-16: 16px;
  --wp-fs-20: 20px; --wp-fs-24: 24px; --wp-fs-32: 32px;

  /* 间距（4px 网格） */
  --wp-sp-1: 4px; --wp-sp-2: 8px; --wp-sp-3: 12px; --wp-sp-4: 16px;
  --wp-sp-6: 24px; --wp-sp-8: 32px; --wp-sp-12: 48px;

  /* 圆角 */
  --wp-r-chip: 6px; --wp-r-ctrl: 10px; --wp-r-card: 14px; --wp-r-dialog: 18px; --wp-r-frame: 20px;

  /* 阴影 */
  --wp-shadow-sm: 0 1px 2px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.05);
  --wp-shadow-lg: 0 30px 80px -20px rgba(15,118,110,.25);
  --wp-inner-hl: inset 0 1px 0 rgba(255,255,255,.6);

  /* 控件尺寸 */
  --wp-btn-h: 40px; --wp-btn-h-sm: 32px; --wp-touch-min: 44px; --wp-icon-btn: 36px;
  --wp-row-h: 52px;  /* 后台表格统一行高 */

  /* 动效 */
  --wp-ease: cubic-bezier(.2,.8,.2,1);
  --wp-dur-fast: 160ms; --wp-dur: 240ms; --wp-dur-slow: 600ms;

  /* 焦点环 */
  --wp-focus: 0 0 0 2px var(--wp-bg), 0 0 0 4px var(--wp-primary);
}

:focus-visible { outline: 2px solid var(--wp-primary); outline-offset: 3px; }
@media (pointer: coarse) { button, a.btn, [role="button"] { min-height: var(--wp-touch-min); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }