/* ============================================================
   青子 · 用户系统原型 —— 设计令牌 & 基础
   Warm Utilitarian · 山野记事
   ============================================================ */

:root {
  /* —— 色板 —— */
  --paper: #F5F3EC;          /* 暖纸底 */
  --paper-2: #EFECE2;
  --surface: #FFFFFF;
  --surface-2: #FBFAF6;
  --line: #E7E2D4;           /* 发丝线 */
  --line-2: #D9D3C2;         /* 强调线 */
  --line-3: #C9C2AD;

  --ink: #17241E;            /* 深林墨绿主文字 */
  --ink-2: #55655C;          /* 次级文字 */
  --ink-3: #8B968D;          /* 弱文字 */
  --ink-invert: #F4F1E7;     /* 深色底上的文字 */

  --brand: #0D6B55;          /* 青瓷绿主操作 */
  --brand-deep: #0A5542;
  --brand-ink: #0C5C4A;
  --brand-bright: #2F8F74;
  --brand-wash: #E3F0EA;
  --brand-wash-2: #F0F7F3;

  --danger: #C14B2B;         /* 朱砂 */
  --danger-deep: #A63A1E;
  --danger-wash: #F9E8E0;
  --danger-line: #EAC3B2;

  --warn: #B08120;           /* 铜黄 焦点/待确认 */
  --warn-deep: #8F6A15;
  --warn-wash: #F8EED6;
  --warn-line: #E6D39A;

  --info: #3E6E8C;           /* 克制的靛灰（非紫系） */
  --info-wash: #E5EEF3;
  --info-line: #C2D6E0;

  --ok: #2F8F74;
  --ok-wash: #E3F0EA;

  --rail: #0F2B22;           /* 深林导航 */
  --rail-2: #16372B;
  --rail-line: rgba(255,255,255,.09);

  --shadow-1: 0 1px 2px rgba(23,36,30,.06), 0 6px 18px -12px rgba(23,36,30,.12);
  --shadow-2: 0 2px 6px rgba(23,36,30,.08), 0 18px 40px -22px rgba(23,36,30,.22);
  --shadow-pop: 0 8px 26px -8px rgba(15,43,34,.28);

  /* —— 圆角 —— */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-full: 999px;

  /* —— 字体 —— */
  --font-ui: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Source Han Sans SC", "Microsoft YaHei", sans-serif;
  --font-display: "Sora", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", sans-serif;

  /* —— 动效 —— */
  --ease: cubic-bezier(.22,.61,.36,1);
  --fast: 140ms;
  --mid: 240ms;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-ui);
  background: var(--paper);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
#app { min-height: 100%; }

h1,h2,h3,h4 { margin: 0; font-weight: 700; letter-spacing: .01em; }
p { margin: 0; }
a { color: var(--brand-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
ul,ol { margin: 0; padding-left: 18px; }
small { font-size: 12px; color: var(--ink-3); }

/* 图标默认尺寸（各容器用更高优先级类覆盖） */
svg { width: 1.15em; height: 1.15em; vertical-align: -0.12em; }

::selection { background: rgba(47,143,116,.22); }

button { font-family: var(--font-ui); }
input, select, textarea { font-family: var(--font-ui); color: var(--ink); }

:focus-visible { outline: 2px solid var(--brand-bright); outline-offset: 2px; }

.num { font-family: var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: .01em; }

/* 滚动条 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #CBC4B0; border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #B3AB92; background-clip: content-box; border: 2px solid transparent; }
::-webkit-scrollbar-track { background: transparent; }

/* 动效 */
@keyframes qz-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes qz-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes qz-pop { from { opacity: 0; transform: scale(.96) translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes qz-slide-r { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes qz-toast { from { opacity: 0; transform: translateY(-8px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes qz-spin { to { transform: rotate(360deg); } }
@keyframes qz-bar { from { width: 0; } to { width: 100%; } }
@keyframes qz-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes qz-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes qz-scan { from { stroke-dashoffset: 120; } to { stroke-dashoffset: 0; } }

.anim-in { animation: qz-in var(--mid) var(--ease) both; }
.stagger > * { animation: qz-in var(--mid) var(--ease) both; }
.stagger > *:nth-child(1){ animation-delay: .02s }
.stagger > *:nth-child(2){ animation-delay: .06s }
.stagger > *:nth-child(3){ animation-delay: .10s }
.stagger > *:nth-child(4){ animation-delay: .14s }
.stagger > *:nth-child(5){ animation-delay: .18s }
.stagger > *:nth-child(6){ animation-delay: .22s }
.stagger > *:nth-child(7){ animation-delay: .26s }
.stagger > *:nth-child(8){ animation-delay: .30s }
.stagger > *:nth-child(9){ animation-delay: .34s }
.stagger > *:nth-child(10){ animation-delay: .38s }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}