/* =============================================================================
  快手账号信息收集系统 — Design Tokens
  四层 Token 架构：A1-identity / A1-structure / A2 / B-slot / C-extension
  设计师：颜好看  |  版本：1.0.0-draft  |  日期：2026-10-05
  寄存器：Product（工具型）  平台：web  三轴：Variance=3 / Motion=3 / Density=7
  [硬约束] 禁止在组件中硬编码颜色/间距/圆角，一律引用以下变量。
  [硬约束] 图标库锁定：Lucide（统一 2px 描边，尺寸 16/20/24px）。禁止 emoji 作功能图标。
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. PRIMITIVE（原始值 — 仅供 semantic 层引用，组件层禁止直接使用）
   ----------------------------------------------------------------------------- */
:root {
  /* Neutral — 冷调石板灰（带极轻蓝调，非纯灰） */
  --n-0:   #FFFFFF;
  --n-25:  #FCFDFE;
  --n-50:  #F7F8FA;
  --n-100: #F1F3F6;
  --n-150: #EAEDF2;
  --n-200: #E3E7ED;
  --n-300: #CDD3DD;
  --n-400: #A6AFBD;
  --n-500: #7C8695;
  --n-600: #5C6474;
  --n-700: #3A4152;
  --n-800: #232937;
  --n-900: #12161F;
  --n-950: #0B0E14;

  /* Accent — 青（Teal），工业控制台气质，与快手品牌橙保持距离 */
  --a-50:  #F0FDFA;
  --a-100: #CCFBF1;
  --a-200: #99F6E4;
  --a-300: #5EEAD4;
  --a-400: #2DD4BF;
  --a-500: #14B8A6;
  --a-600: #0D9488;
  --a-700: #0F766E;
  --a-800: #115E59;
  --a-900: #134E4A;

  /* Semantic primitives */
  --ok-50:  #DCFCE7; --ok-400: #4ADE80; --ok-500: #22C55E; --ok-600: #16A34A; --ok-700: #15803D;
  --wa-50:  #FEF3C7; --wa-400: #FBBF24; --wa-500: #F59E0B; --wa-600: #D97706; --wa-700: #B45309;
  --er-50:  #FEE2E2; --er-400: #F87171; --er-500: #EF4444; --er-600: #DC2626; --er-700: #B91C1C;
  --in-50:  #E0F2FE; --in-400: #38BDF8; --in-500: #0EA5E9; --in-600: #0369A1; --in-700: #075985;
}

/* -----------------------------------------------------------------------------
   2. SEMANTIC + ROLE — LIGHT THEME（默认主题）
   A1-identity / A2 / B-slot
   ----------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Surface（表面层） */
  --bg:             var(--n-50);   /* A1 — 页面背景 */
  --surface:        var(--n-0);    /* A1 — 卡片 / 容器 */
  --surface-raised: var(--n-0);    /* A1 — 弹层 / 浮起表面 */
  --surface-sunken: var(--n-100);  /* B-slot — 内嵌区 / 表头 */
  --surface-hover:  var(--n-100);  /* B-slot — 行/项悬停底 */
  --surface-selected: var(--a-50); /* B-slot — 选中行底 */

  /* Foreground（前景层） */
  --fg:          var(--n-900);  /* A1 — 主文本 */
  --fg-2:        var(--n-700);  /* B-slot — 次级文本 */
  --muted:       var(--n-600);  /* A1 — 副文本 / 表头 */
  --meta:        var(--n-500);  /* B-slot — 元数据 / 辅助 */
  --fg-disabled: var(--n-400);  /* A2 — 禁用文本 */
  --fg-on-accent: #FFFFFF;      /* A2 */

  /* Border（边框层） */
  --border:        var(--n-200); /* A1 */
  --border-soft:   var(--n-150); /* B-slot — 行内分隔符 */
  --border-strong: var(--n-300); /* A2 — 强调边框 / 输入框 */

  /* Accent（强调色 — 每屏可见使用 ≤ 2 处） */
  --accent:         var(--a-600);
  --accent-hover:   var(--a-700);
  --accent-active:  var(--a-800);
  --accent-on:      #FFFFFF;
  --accent-soft:    var(--a-50);
  --accent-soft-fg: var(--a-700);
  --accent-line:    var(--a-200);

  /* Semantic */
  --success:      var(--ok-600);
  --success-soft: var(--ok-50);
  --success-fg:   var(--ok-700);
  --warn:         var(--wa-600);
  --warn-soft:    var(--wa-50);
  --warn-fg:      var(--wa-700);
  --danger:       var(--er-600);
  --danger-soft:  var(--er-50);
  --danger-fg:    var(--er-700);
  --info:         var(--in-600);
  --info-soft:    var(--in-50);
  --info-fg:      var(--in-700);

  /* Effect */
  --focus-ring: rgba(13, 148, 136, 0.35);
  --overlay:    rgba(18, 22, 31, 0.45);

  /* Elevation（三级层级 — 工具型以边框为主，阴影克制） */
  --elev-flat:   none;
  --elev-ring:   0 0 0 1px var(--border);
  --elev-xs:     0 1px 2px rgba(18, 22, 31, 0.05);
  --elev-sm:     0 1px 2px rgba(18, 22, 31, 0.06), 0 1px 3px rgba(18, 22, 31, 0.04);
  --elev-md:     0 2px 6px rgba(18, 22, 31, 0.07), 0 8px 20px rgba(18, 22, 31, 0.06);
  --elev-lg:     0 8px 24px rgba(18, 22, 31, 0.10), 0 2px 6px rgba(18, 22, 31, 0.06);
  --elev-focus:  0 0 0 3px var(--focus-ring);
}

/* -----------------------------------------------------------------------------
   3. SEMANTIC + ROLE — DARK THEME（次级主题，长时段值守用）
   ----------------------------------------------------------------------------- */
[data-theme="dark"] {
  color-scheme: dark;

  --bg:             var(--n-950);
  --surface:        var(--n-900);
  --surface-raised: #1A202B;
  --surface-sunken: #0E121A;
  --surface-hover:  #1A202B;
  --surface-selected: #0F2A28;

  --fg:          #E8ECF2;
  --fg-2:        #C2C9D6;
  --muted:       #8A93A3;
  --meta:        #5A6272;
  --fg-disabled: var(--n-700);
  --fg-on-accent: #04201C;

  --border:        #242B38;
  --border-soft:   rgba(255, 255, 255, 0.06);
  --border-strong: #333C4D;

  --accent:         var(--a-400);
  --accent-hover:   var(--a-300);
  --accent-active:  var(--a-500);
  --accent-on:      #04201C;
  --accent-soft:    rgba(45, 212, 191, 0.12);
  --accent-soft-fg: var(--a-300);
  --accent-line:    rgba(45, 212, 191, 0.30);

  --success:      var(--ok-400);
  --success-soft: rgba(74, 222, 128, 0.14);
  --success-fg:   var(--ok-400);
  --warn:         var(--wa-400);
  --warn-soft:    rgba(251, 191, 36, 0.14);
  --warn-fg:      var(--wa-400);
  --danger:       var(--er-400);
  --danger-soft:  rgba(248, 113, 113, 0.14);
  --danger-fg:    var(--er-400);
  --info:         var(--in-400);
  --info-soft:    rgba(56, 189, 248, 0.14);
  --info-fg:      var(--in-400);

  --focus-ring: rgba(45, 212, 191, 0.45);
  --overlay:    rgba(0, 0, 0, 0.62);

  --elev-ring:  0 0 0 1px var(--border);
  --elev-xs:    0 1px 2px rgba(0, 0, 0, 0.40);
  --elev-sm:    0 2px 6px rgba(0, 0, 0, 0.45);
  --elev-md:    0 8px 24px rgba(0, 0, 0, 0.50);
  --elev-lg:    0 16px 40px rgba(0, 0, 0, 0.55);
  --elev-focus: 0 0 0 3px var(--focus-ring);
}

/* -----------------------------------------------------------------------------
   4. TYPOGRAPHY — Fonts / Scale / Leading / Tracking
   ----------------------------------------------------------------------------- */
:root {
  --font-display: Manrope, "Noto Sans SC", -apple-system, BlinkMacSystemFont,
                  "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-body:    Manrope, "Noto Sans SC", -apple-system, BlinkMacSystemFont,
                  "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono:    "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  /* 字重：3 级体系 */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* 字号阶梯（8 级，固定 rem） */
  --text-xs:   0.75rem;   /* 12px — 标签 / 徽章 */
  --text-sm:   0.875rem;  /* 14px — 表格单元 / 正文（密集界面基准） */
  --text-base: 1rem;      /* 16px — 正文基准 */
  --text-lg:   1.125rem;  /* 18px — 小标题 */
  --text-xl:   1.25rem;   /* 20px — 区块标题 */
  --text-2xl:  1.5rem;    /* 24px — 页面标题 */
  --text-3xl:  2rem;      /* 32px — 大标题 */
  --text-4xl:  2.5rem;    /* 40px — 登录页主标题 */

  /* 行高 */
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  /* 字距 */
  --tracking-display: -0.02em; /* ≥32px 标题 */
  --tracking-heading: -0.01em; /* 20-24px 标题 */
  --tracking-normal:  0;       /* 正文 14-18px */
  --tracking-small:   0.01em;  /* 11-13px 小字 */
  --tracking-caps:    0.08em;  /* ALL CAPS 标签必用 */
}

/* -----------------------------------------------------------------------------
   5. SPACING（4px 基准网格，仅允许下列值）
   ----------------------------------------------------------------------------- */
:root {
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
}

/* -----------------------------------------------------------------------------
   6. RADIUS / ELEVATION LAYER / LAYOUT / Z-INDEX
   ----------------------------------------------------------------------------- */
:root {
  /* Radius（卡片 ≤ 12px，禁止过度圆角） */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-pill: 9999px;

  /* Layout */
  --container-max:     1200px;
  --sidebar-width:     248px;
  --sidebar-collapsed: 64px;
  --topbar-height:     60px;
  --table-row:         52px;
  --table-row-compact: 44px;
  --control-height:    36px;
  --control-height-lg: 44px;
  --touch-target:      44px;   /* WCAG 2.5.5 最小点击区 */

  /* Z-index */
  --z-base:     0;
  --z-dropdown: 1000;
  --z-sticky:   1100;
  --z-modal:    1200;
  --z-toast:    1300;
}

/* -----------------------------------------------------------------------------
   7. MOTION
   ----------------------------------------------------------------------------- */
:root {
  --motion-instant: 80ms;   /* 即时反馈：按下 / 开关 */
  --motion-fast:    150ms;  /* 状态确认收敛值：hover / 选中 */
  --motion-base:    200ms;  /* 进入 UI：下拉 / Toast */
  --motion-slow:    250ms;  /* 跨屏：模态 / 抽屉 */
  --ease-standard:  cubic-bezier(0.2, 0, 0, 1);
  --ease-in:        cubic-bezier(0.4, 0, 1, 1);
  --ease-out:       cubic-bezier(0, 0, 0.2, 1);
}

/* -----------------------------------------------------------------------------
   8. GLOBAL RESET & A11Y BASELINE
   ----------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 数字 / ID / CK 文本统一等宽，保证列对齐 */
.font-mono,
[data-numeric] {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 1;
}

/* 可见焦点环（键盘可达） */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

::selection { background: var(--accent-soft); color: var(--accent-soft-fg); }

/* 尊重减弱动效偏好 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}