/* ==========================================================================
   tokens.css — 设计令牌（Design Tokens）
   全站唯一的"变量来源"。改这里就能改全站观感，任何组件都不写死颜色/间距。
   --------------------------------------------------------------------------
   tokens 层位于最低优先级，因此组件可以安全地局部覆盖某个令牌
   （例如某组件改写 --radius-md），不会被 :root 的全局值压住。
   其余分层顺序在下方 @layer 语句统一声明：
     tokens → base → layout → components → views → utilities
   越靠后的层优先级越高，组件层无需与基础层"比特异性"。
   ========================================================================== */

@layer tokens, base, layout, components, views, utilities;

@layer tokens {

:root {
  /* ---------- 品牌色（闲鱼业务：专业蓝主色 + 会员金强调色）---------- */
  --brand-50:  #eef5ff;
  --brand-100: #dbe9fe;
  --brand-200: #bfd8fd;
  --brand-300: #93bdfb;
  --brand-400: #609bf7;
  --brand-500: #3b7df0;
  --brand-600: #1b6ef3;   /* 主色 */
  --brand-700: #1558c9;
  --brand-800: #1548a1;
  --brand-900: #163e80;

  /* 会员金（年卡/会员身份专用，只用于会员相关语义） */
  --gold-50:  #fff9e6;
  --gold-100: #fff1c2;
  --gold-200: #ffe487;
  --gold-300: #ffd24d;
  --gold-400: #f5b800;
  --gold-500: #d99b00;
  --gold-600: #a87400;
  --gold-700: #7a5300;

  /* ---------- 中性色阶（微冷灰，贴近现代后台观感）---------- */
  --gray-0:   #ffffff;
  --gray-25:  #fcfcfd;
  --gray-50:  #f7f8fa;
  --gray-100: #f1f3f5;
  --gray-200: #e6e8ec;
  --gray-300: #d3d7de;
  --gray-400: #a8aeb9;
  --gray-500: #7c8494;
  --gray-600: #5a6270;
  --gray-700: #414855;
  --gray-800: #2b303a;
  --gray-900: #191d24;

  /* ---------- 语义色 ---------- */
  --success-50:  #e9f9ef;
  --success-100: #cdf0dc;
  --success-500: #16a34a;
  --success-600: #128a3e;
  --success-700: #0d6b30;

  --warning-50:  #fff8e8;
  --warning-100: #ffeec4;
  --warning-500: #e08700;
  --warning-600: #bd6f00;
  --warning-700: #945600;

  --danger-50:  #fdeeee;
  --danger-100: #fadada;
  --danger-500: #dc2626;
  --danger-600: #bd1f1f;
  --danger-700: #961717;

  --info-50:  var(--brand-50);
  --info-100: var(--brand-100);
  --info-500: var(--brand-600);

  /* ---------- 语义别名（组件只引用这一层）---------- */
  --color-bg:            var(--gray-50);
  --color-surface:       var(--gray-0);
  --color-surface-2:     var(--gray-25);
  --color-surface-sunken: var(--gray-100);
  --color-border:        var(--gray-200);
  --color-border-strong: var(--gray-300);
  --color-text:          var(--gray-800);
  --color-text-muted:    var(--gray-500);
  --color-text-subtle:   var(--gray-400);
  --color-text-invert:   #ffffff;
  --color-primary:       var(--brand-600);
  --color-primary-hover: var(--brand-700);
  --color-primary-soft:  var(--brand-50);
  --color-focus:         var(--brand-400);

  /* 状态语义（表格/徽章共用） */
  --color-pos: var(--success-500);   /* 收入 / 正向金额 */
  --color-neg: var(--danger-500);    /* 支出 / 负向金额 */

  /* ---------- 字体 ---------- */
  /* 中文优先使用系统 UI 字体，避免加载外部字体（无 CDN、离线可用） */
  --font-sans: system-ui, -apple-system, "Segoe UI", "PingFang SC",
               "HarmonyOS Sans SC", "Microsoft YaHei", "Hiragino Sans GB",
               "Source Han Sans SC", "Noto Sans CJK SC", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", "Courier New", monospace;

  /* 字号：正文 14px 起步（可读性下限），密集区域用 13px */
  --text-2xs: 0.6875rem;  /* 11px 仅用于角标 */
  --text-xs:  0.75rem;    /* 12px 辅助说明 */
  --text-sm:  0.8125rem;  /* 13px 表格/密集区 */
  --text-base: 0.875rem;  /* 14px 正文 */
  --text-md:  1rem;       /* 16px 强调正文 */
  --text-lg:  1.125rem;   /* 18px 卡片标题 */
  --text-xl:  1.375rem;   /* 22px 页面标题 */
  --text-2xl: 1.75rem;    /* 28px 指标数值 */
  --text-3xl: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem); /* 登录页大标题 */

  --leading-tight: 1.3;
  --leading-snug:  1.45;
  --leading-base:  1.6;   /* 中文正文行距下限 */
  --leading-loose: 1.75;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semi:   600;
  --weight-bold:   700;

  /* ---------- 间距（4px 基准栅格）---------- */
  --space-1:  0.25rem;  /* 4  */
  --space-2:  0.5rem;   /* 8  */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.25rem;  /* 20 */
  --space-6:  1.5rem;   /* 24 */
  --space-8:  2rem;     /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */

  /* ---------- 圆角（2025 现代观感：中等圆角，不再追求超大圆角）---------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-full: 999px;

  /* ---------- 阴影（克制使用：靠 1px 边框表达层次）---------- */
  --shadow-xs:  0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-sm:  0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-md:  0 4px 12px rgba(16, 24, 40, 0.08);
  --shadow-lg:  0 12px 32px rgba(16, 24, 40, 0.14);
  --shadow-focus: 0 0 0 3px var(--brand-100);

  /* ---------- 层级 ---------- */
  --z-base: 1;
  --z-sticky: 100;
  --z-drawer: 200;
  --z-modal: 300;
  --z-toast: 400;

  /* ---------- 动效 ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  /* ---------- 布局尺寸 ---------- */
  --sidebar-w: 236px;
  --sidebar-w-collapsed: 68px;
  --topbar-h: 56px;
  --tabbar-h: 60px;        /* 移动端底部导航 */
  --content-max: 1560px;
  --control-h: 38px;       /* 输入/按钮统一高度 */
  --control-h-sm: 30px;
  --control-h-lg: 44px;
  --touch-min: 44px;       /* 触控最小目标 */

  color-scheme: light;
}

/* ==========================================================================
   暗色主题：由 <html data-theme="dark"> 触发；未显式设置时跟随系统
   （主题模块会把用户选择写入 data-theme，优先级高于系统偏好）
   ========================================================================== */

html[data-theme="dark"] {
  --color-bg:            #16181d;
  --color-surface:       #1d2026;
  --color-surface-2:     #23262d;
  --color-surface-sunken: #131519;
  --color-border:        #2f333c;
  --color-border-strong: #40454f;
  --color-text:          #e7e9ee;
  --color-text-muted:    #9aa1ad;
  --color-text-subtle:   #6f7681;
  --color-primary:       var(--brand-400);
  --color-primary-hover: var(--brand-300);
  --color-primary-soft:  #1b2a44;
  --color-focus:         var(--brand-400);

  /*
   * 色阶的暗色版本必须成对覆盖：
   *   50/100 是"浅色背景"→ 换成深色底；
   *   600/700 是"放在浅底上的深色文字"→ 换成亮色文字。
   * 只覆盖一半就会出现"浅色渐变卡片上配灰色文字"的对比度事故
   * （会员页的"生效中"金字卡就是这么糊掉的）。
   */
  --brand-50:  #14243d;
  --brand-100: #1a2d4a;
  --brand-200: #24405f;
  --brand-300: #93bdfb;
  --brand-600: #6ba3ff;
  --brand-700: #93bdfb;

  --gold-50:  #2a2110;
  --gold-100: #362a15;
  --gold-200: #4a3a1c;
  --gold-300: #6b5426;
  --gold-600: #f0c243;
  --gold-700: #ffd76b;

  --success-50:  #10281a;
  --success-100: #17351f;
  --success-600: #34d06e;
  --success-700: #6fe29a;

  --warning-50:  #2b2110;
  --warning-100: #3a2c14;
  --warning-600: #f5a623;
  --warning-700: #ffc45e;

  --danger-50:   #2c1414;
  --danger-100:  #3a1b1b;
  --danger-600:  #ff7a72;
  --danger-700:  #ffa39c;

  --info-50:     #1b2a44;
  --info-100:    #1f3355;

  --gray-0:  #1d2026;
  --gray-25: #23262d;
  --gray-50: #23262d;
  --gray-100: #282c34;
  --gray-200: #2f333c;
  --gray-300: #40454f;

  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg:  0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-focus: 0 0 0 3px rgba(96, 155, 247, 0.28);

  color-scheme: dark;
}

/* 跟随系统（用户未手动选择主题时） */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    --color-bg:            #16181d;
    --color-surface:       #1d2026;
    --color-surface-2:     #23262d;
    --color-surface-sunken: #131519;
    --color-border:        #2f333c;
    --color-border-strong: #40454f;
    --color-text:          #e7e9ee;
    --color-text-muted:    #9aa1ad;
    --color-text-subtle:   #6f7681;
    --color-primary:       var(--brand-400);
    --color-primary-hover: var(--brand-300);
    --color-primary-soft:  #1b2a44;
    --color-focus:         var(--brand-400);

    /* 与上方 data-theme="dark" 保持一致（含色阶成对覆盖） */
    --brand-50:  #14243d;
    --brand-100: #1a2d4a;
    --brand-200: #24405f;
    --brand-300: #93bdfb;
    --brand-600: #6ba3ff;
    --brand-700: #93bdfb;

    --gold-50:  #2a2110;
    --gold-100: #362a15;
    --gold-200: #4a3a1c;
    --gold-300: #6b5426;
    --gold-600: #f0c243;
    --gold-700: #ffd76b;

    --success-50:  #10281a;
    --success-100: #17351f;
    --success-600: #34d06e;
    --success-700: #6fe29a;

    --warning-50:  #2b2110;
    --warning-100: #3a2c14;
    --warning-600: #f5a623;
    --warning-700: #ffc45e;

    --danger-50:   #2c1414;
    --danger-100:  #3a1b1b;
    --danger-600:  #ff7a72;
    --danger-700:  #ffa39c;

    --info-50:     #1b2a44;
    --info-100:    #1f3355;

    --gray-0:  #1d2026;
    --gray-25: #23262d;
    --gray-50: #23262d;
    --gray-100: #282c34;
    --gray-200: #2f333c;
    --gray-300: #40454f;

    --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.35);
    --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg:  0 12px 32px rgba(0, 0, 0, 0.5);
    --shadow-focus: 0 0 0 3px rgba(96, 155, 247, 0.28);

    color-scheme: dark;
  }
}

} /* end @layer tokens */