/* Anchor 2.9 · Design System 1.0（Token 化色彩 + 抽屉体系） */
/* 设计系统：--bg / --surface / --surface-elevated / --text-* / --shadow-* */

:root,
:root[data-theme="light"] {
  /* 设计系统 1.0 颜色分层 */
  --bg: #F6F7F9;
  --surface: #FFFFFF;
  --surface-elevated: #FFFFFF;
  --surface-soft: #F6F7F9;
  --border: rgba(0, 0, 0, 0.06);
  --border-soft: rgba(0, 0, 0, 0.06);
  --text-primary: rgba(0, 0, 0, 0.88);
  --text-secondary: rgba(0, 0, 0, 0.55);
  --text-tertiary: rgba(0, 0, 0, 0.35);
  --accent: #3A6FF7;
  /* Anchor 2.7 统一主色（消灭刺眼蓝） */
  --primary: #4F6DF5;
  --primary-soft: rgba(79, 109, 245, 0.08);
  /* 阴影系统 */
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 40px 80px rgba(0, 0, 0, 0.18);
  /* 抽屉 Backdrop */
  --drawer-backdrop: rgba(0, 0, 0, 0.18);
  /* 兼容旧 token */
  --anchor-bg: #F6F7F9;
  --anchor-bg-subtle: #F0F1F3;
  --anchor-card: #FFFFFF;
  --anchor-border: #e5e7eb;
  --anchor-border-focus: #93c5fd;
  --anchor-text: rgba(0, 0, 0, 0.88);
  --anchor-text-secondary: rgba(0, 0, 0, 0.55);
  --anchor-primary: #3A6FF7;
  --anchor-primary-hover: #2d5ce0;
  --anchor-finance-expense: #b91c1c;
  --anchor-finance-income: #059669;
  --anchor-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  --anchor-shadow-md: 0 10px 30px rgba(0, 0, 0, 0.08);
  /* 圆角 / 间距 / 字体 */
  --anchor-radius: 12px;
  --anchor-radius-sm: 8px;
  --anchor-radius-pill: 9999px;
  --anchor-space-xs: 4px;
  --anchor-space-sm: 8px;
  --anchor-space-md: 12px;
  --anchor-space-lg: 16px;
  --anchor-space-xl: 20px;
  --anchor-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --anchor-font-size-sm: 12px;
  --anchor-font-size-base: 14px;
  --anchor-font-size-lg: 15px;
  --anchor-font-size-title: 20px;
  --anchor-line-height: 1.5;
  --anchor-tap: 44px;
  --anchor-transition: 0.15s ease;
  /* Motion tokens（P2 全局微动效） */
  --dur-1: 0.12s;
  --dur-3: 0.26s;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-press: cubic-bezier(0.22, 1, 0.36, 1);
  --anchor-z-header: 100;
  --anchor-z-drawer: 1000;
  --anchor-z-modal: 2000;
  --anchor-z-popover: 3000;
  --anchor-z-toast: 10000;
}

/* Dark 模式（不纯黑） */
[data-theme="dark"],
.anchor-dark {
  --bg: #0F1115;
  --surface: #151821;
  --surface-elevated: #1C202A;
  --surface-soft: #1A1C21;
  --border: rgba(255, 255, 255, 0.08);
  --border-soft: rgba(255, 255, 255, 0.06);
  --text-primary: rgba(255, 255, 255, 0.92);
  --text-secondary: rgba(255, 255, 255, 0.6);
  --text-tertiary: rgba(255, 255, 255, 0.4);
  --accent: #5B8DEF;
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 40px 80px rgba(0, 0, 0, 0.45);
  --drawer-backdrop: rgba(0, 0, 0, 0.35);
  --anchor-bg: #0F1115;
  --anchor-bg-subtle: #151821;
  --anchor-card: #151821;
  --anchor-border: rgba(255, 255, 255, 0.08);
  --anchor-text: rgba(255, 255, 255, 0.92);
  --anchor-text-secondary: rgba(255, 255, 255, 0.65);
  --anchor-primary: #5B8DEF;
  --anchor-primary-hover: #3A6FF7;
  --anchor-finance-expense: #f87171;
  --anchor-finance-income: #34d399;
  --anchor-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  --anchor-shadow-md: 0 10px 30px rgba(0, 0, 0, 0.35);
  --dur-1: 0.12s;
  --dur-3: 0.26s;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-press: cubic-bezier(0.22, 1, 0.36, 1);
}

/* PART 7｜动效统一规范 */
* {
  transition:
    background-color 220ms ease,
    color 180ms ease,
    transform 220ms ease,
    opacity 180ms ease;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0F1115;
    --surface: #151821;
    --surface-elevated: #1C202A;
    --border: rgba(255, 255, 255, 0.08);
    --text-primary: rgba(255, 255, 255, 0.92);
    --text-secondary: rgba(255, 255, 255, 0.65);
    --text-tertiary: rgba(255, 255, 255, 0.4);
    --accent: #5B8DEF;
    --anchor-bg: #0F1115;
    --anchor-bg-subtle: #151821;
    --anchor-card: #151821;
    --anchor-border: rgba(255, 255, 255, 0.08);
    --anchor-text: rgba(255, 255, 255, 0.92);
    --anchor-text-secondary: rgba(255, 255, 255, 0.65);
    --anchor-primary: #5B8DEF;
    --anchor-finance-expense: #f87171;
    --anchor-finance-income: #34d399;
  }
}

/* PART 7｜动效统一规范（只在此处定义，不再给单独元素加 transition） */
* {
  transition:
    background-color 220ms ease,
    color 180ms ease,
    transform 220ms ease,
    opacity 180ms ease;
}

/* ===== Sheet 系统唯一可信 Tokens ===== */
:root {
  --sheet-radius: 22px;
  --sheet-shadow: 0 18px 50px rgba(0,0,0,.10);
  --sheet-border: 1px solid rgba(0,0,0,.06);
  --sheet-bg: rgba(255,255,255,.92);
  --sheet-blur: 18px;

  --card-radius: 18px;
  --card-bg: rgba(255,255,255,.86);
  --card-border: 1px solid rgba(0,0,0,.05);

  --tap-bg: rgba(79,109,245,.10);
  --tap-bg-weak: rgba(0,0,0,.04);

  --text-1: rgba(0,0,0,.92);
  --text-2: rgba(0,0,0,.58);
  --text-3: rgba(0,0,0,.38);

  --primary: #4F6DF5;
  --primary-weak: rgba(79,109,245,.12);

  --dur: 220ms;
  --ease: cubic-bezier(.2,.9,.2,1);
}

[data-theme="dark"] {
  --sheet-border: 1px solid rgba(255,255,255,.08);
  --sheet-bg: rgba(24,26,32,.78);
  --card-bg: rgba(24,26,32,.62);
  --card-border: 1px solid rgba(255,255,255,.06);

  --tap-bg-weak: rgba(255,255,255,.06);

  --text-1: rgba(255,255,255,.92);
  --text-2: rgba(255,255,255,.62);
  --text-3: rgba(255,255,255,.40);
}

/* 微动效：呼吸 + 过渡 */
@keyframes anchorBreath {
  0% { transform: translateY(0); opacity: .92; }
  50% { transform: translateY(-1px); opacity: 1; }
  100% { transform: translateY(0); opacity: .92; }
}

.anchor-breath {
  animation: anchorBreath 4.2s ease-in-out infinite;
}

.anchor-sheet {
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

/* ===== Sheet 系统唯一可信 Tokens ===== */
:root {
  --sheet-radius: 22px;
  --sheet-shadow: 0 18px 50px rgba(0,0,0,.10);
  --sheet-border: 1px solid rgba(0,0,0,.06);
  --sheet-bg: rgba(255,255,255,.92);
  --sheet-blur: 18px;

  --card-radius: 18px;
  --card-bg: rgba(255,255,255,.86);
  --card-border: 1px solid rgba(0,0,0,.05);

  --tap-bg: rgba(79,109,245,.10);
  --tap-bg-weak: rgba(0,0,0,.04);

  --text-1: rgba(0,0,0,.92);
  --text-2: rgba(0,0,0,.58);
  --text-3: rgba(0,0,0,.38);

  --primary: #4F6DF5;
  --primary-weak: rgba(79,109,245,.12);

  --dur: 220ms;
  --ease: cubic-bezier(.2,.9,.2,1);
}

[data-theme="dark"] {
  --sheet-border: 1px solid rgba(255,255,255,.08);
  --sheet-bg: rgba(24,26,32,.78);
  --card-bg: rgba(24,26,32,.62);
  --card-border: 1px solid rgba(255,255,255,.06);

  --tap-bg-weak: rgba(255,255,255,.06);

  --text-1: rgba(255,255,255,.92);
  --text-2: rgba(255,255,255,.62);
  --text-3: rgba(255,255,255,.40);
}

@keyframes anchorBreath {
  0% { transform: translateY(0); opacity: .92; }
  50% { transform: translateY(-1px); opacity: 1; }
  100% { transform: translateY(0); opacity: .92; }
}

.anchor-breath {
  animation: anchorBreath 4.2s ease-in-out infinite;
}

.anchor-sheet {
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

/* ===== Sheet 系统唯一可信 Tokens ===== */
:root {
  --sheet-radius: 22px;
  --sheet-shadow: 0 18px 50px rgba(0,0,0,.10);
  --sheet-border: 1px solid rgba(0,0,0,.06);
  --sheet-bg: rgba(255,255,255,.92);
  --sheet-blur: 18px;

  --card-radius: 18px;
  --card-bg: rgba(255,255,255,.86);
  --card-border: 1px solid rgba(0,0,0,.05);

  --tap-bg: rgba(79,109,245,.10);
  --tap-bg-weak: rgba(0,0,0,.04);

  --text-1: rgba(0,0,0,.92);
  --text-2: rgba(0,0,0,.58);
  --text-3: rgba(0,0,0,.38);

  --primary: #4F6DF5;
  --primary-weak: rgba(79,109,245,.12);

  --dur: 220ms;
  --ease: cubic-bezier(.2,.9,.2,1);
}

[data-theme="dark"] {
  --sheet-border: 1px solid rgba(255,255,255,.08);
  --sheet-bg: rgba(24,26,32,.78);
  --card-bg: rgba(24,26,32,.62);
  --card-border: 1px solid rgba(255,255,255,.06);

  --tap-bg-weak: rgba(255,255,255,.06);

  --text-1: rgba(255,255,255,.92);
  --text-2: rgba(255,255,255,.62);
  --text-3: rgba(255,255,255,.40);
}

/* 微动效：呼吸 + 过渡 */
@keyframes anchorBreath {
  0% { transform: translateY(0); opacity: .92; }
  50% { transform: translateY(-1px); opacity: 1; }
  100% { transform: translateY(0); opacity: .92; }
}

.anchor-breath {
  animation: anchorBreath 4.2s ease-in-out infinite;
}

.anchor-sheet {
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

/* ===== Sheet 系统唯一可信 Token（收敛浮层样式） ===== */
:root {
  --sheet-radius: 22px;
  --sheet-shadow: 0 18px 50px rgba(0,0,0,.10);
  --sheet-border: 1px solid rgba(0,0,0,.06);
  --sheet-bg: rgba(255,255,255,.92);
  --sheet-blur: 18px;

  --card-radius: 18px;
  --card-bg: rgba(255,255,255,.86);
  --card-border: 1px solid rgba(0,0,0,.05);

  --tap-bg: rgba(79,109,245,.10);
  --tap-bg-weak: rgba(0,0,0,.04);

  --text-1: rgba(0,0,0,.92);
  --text-2: rgba(0,0,0,.58);
  --text-3: rgba(0,0,0,.38);

  --primary: #4F6DF5;
  --primary-weak: rgba(79,109,245,.12);

  --dur: 220ms;
  --ease: cubic-bezier(.2,.9,.2,1);
}

[data-theme="dark"] {
  --sheet-border: 1px solid rgba(255,255,255,.08);
  --sheet-bg: rgba(24,26,32,.78);
  --card-bg: rgba(24,26,32,.62);
  --card-border: 1px solid rgba(255,255,255,.06);

  --tap-bg-weak: rgba(255,255,255,.06);

  --text-1: rgba(255,255,255,.92);
  --text-2: rgba(255,255,255,.62);
  --text-3: rgba(255,255,255,.40);
}

/* 微动效：呼吸 + 过渡 */
@keyframes anchorBreath {
  0% { transform: translateY(0); opacity: .92; }
  50% { transform: translateY(-1px); opacity: 1; }
  100% { transform: translateY(0); opacity: .92; }
}

.anchor-breath {
  animation: anchorBreath 4.2s ease-in-out infinite;
}

.anchor-sheet {
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

/* ===== Sheet 系统唯一可信 Tokens ===== */
:root {
  --sheet-radius: 22px;
  --sheet-shadow: 0 18px 50px rgba(0,0,0,.10);
  --sheet-border: 1px solid rgba(0,0,0,.06);
  --sheet-bg: rgba(255,255,255,.92);
  --sheet-blur: 18px;

  --card-radius: 18px;
  --card-bg: rgba(255,255,255,.86);
  --card-border: 1px solid rgba(0,0,0,.05);

  --tap-bg: rgba(79,109,245,.10);
  --tap-bg-weak: rgba(0,0,0,.04);

  --text-1: rgba(0,0,0,.92);
  --text-2: rgba(0,0,0,.58);
  --text-3: rgba(0,0,0,.38);

  --primary: #4F6DF5;
  --primary-weak: rgba(79,109,245,.12);

  --dur: 220ms;
  --ease: cubic-bezier(.2,.9,.2,1);
}

[data-theme="dark"] {
  --sheet-border: 1px solid rgba(255,255,255,.08);
  --sheet-bg: rgba(24,26,32,.78);
  --card-bg: rgba(24,26,32,.62);
  --card-border: 1px solid rgba(255,255,255,.06);

  --tap-bg-weak: rgba(255,255,255,.06);

  --text-1: rgba(255,255,255,.92);
  --text-2: rgba(255,255,255,.62);
  --text-3: rgba(255,255,255,.40);
}

/* 微动效：呼吸 + 过渡 */
@keyframes anchorBreath {
  0% { transform: translateY(0); opacity: .92; }
  50% { transform: translateY(-1px); opacity: 1; }
  100% { transform: translateY(0); opacity: .92; }
}

.anchor-breath {
  animation: anchorBreath 4.2s ease-in-out infinite;
}

.anchor-sheet {
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

/* ===== Sheet 系统唯一可信 Tokens ===== */
:root {
  --sheet-radius: 22px;
  --sheet-shadow: 0 18px 50px rgba(0,0,0,.10);
  --sheet-border: 1px solid rgba(0,0,0,.06);
  --sheet-bg: rgba(255,255,255,.92);
  --sheet-blur: 18px;

  --card-radius: 18px;
  --card-bg: rgba(255,255,255,.86);
  --card-border: 1px solid rgba(0,0,0,.05);

  --tap-bg: rgba(79,109,245,.10);
  --tap-bg-weak: rgba(0,0,0,.04);

  --text-1: rgba(0,0,0,.92);
  --text-2: rgba(0,0,0,.58);
  --text-3: rgba(0,0,0,.38);

  --primary: #4F6DF5;
  --primary-weak: rgba(79,109,245,.12);

  --dur: 220ms;
  --ease: cubic-bezier(.2,.9,.2,1);
}

[data-theme="dark"] {
  --sheet-border: 1px solid rgba(255,255,255,.08);
  --sheet-bg: rgba(24,26,32,.78);
  --card-bg: rgba(24,26,32,.62);
  --card-border: 1px solid rgba(255,255,255,.06);

  --tap-bg-weak: rgba(255,255,255,.06);

  --text-1: rgba(255,255,255,.92);
  --text-2: rgba(255,255,255,.62);
  --text-3: rgba(255,255,255,.40);
}

/* 微动效：呼吸 + 过渡 */
@keyframes anchorBreath {
  0% { transform: translateY(0); opacity: .92; }
  50% { transform: translateY(-1px); opacity: 1; }
  100% { transform: translateY(0); opacity: .92; }
}

.anchor-breath {
  animation: anchorBreath 4.2s ease-in-out infinite;
}

.anchor-sheet {
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
