@charset "UTF-8";

/* ============================================================================
   众好物业企业能力平台 · Design Tokens
   ----------------------------------------------------------------------------
   本文件只定义设计变量，不包含页面/组件样式。引用顺序：
   tokens.css → 业务样式。
   所有颜色、字号、间距、圆角、阴影、动效都优先使用这里的变量，避免页面内
   出现散落的魔法数字。颜色语义见 docs/DESIGN.md。
   ========================================================================== */

:root {
  color-scheme: light;

  /* ── 品牌主色：深海军蓝 ────────────────────────────────────────────────
     ink-950 最深，用于遮罩/最深底；ink-900 为品牌主色与深色侧栏；
     ink-800 用于深色表面层级与悬停；ink-700 用于浅色背景上的可读强调。 */
  --ink-950: #081725;
  --ink-900: #0B1F33;
  --ink-800: #102A42;
  --ink-700: #1B3A55;

  /* ── 品牌暖金 ──────────────────────────────────────────────────────────
     gold-500 为品牌标准金；gold-400 用于深色背景上的文字/线条；
     gold-100 用于浅金背景。gold-600/700 为延展色，仅用于浅色背景上
     需要可读性的小字（gold-500 在白底对比度不足，不可用于正文）。 */
  --gold-500: #B89458;
  --gold-400: #C9A66B;
  --gold-300: #DCC08C;
  --gold-100: #F5ECDD;
  --gold-600: #A5824B;
  --gold-700: #7D5F35;

  /* ── 中性色：米白、纸面、描边、文字 ────────────────────────────────── */
  --paper: #F5F6F7;
  --card: #FFFFFF;
  --line: #E4E9ED;
  --line-strong: #CFD8DF;
  --text: #172735;
  --text-secondary: #526575;
  --text-muted: #8493A0;
  /* 注意：--text-muted 在白底仅 3.15:1，只用于禁用、装饰和辅助图形，
     不要承载关键信息；表单占位文字优先使用 --text-secondary。 */

  /* 表单控件边界：在白底约 3.4:1，满足非文本控件的可识别要求。
     普通分隔线仍使用 --line / --line-strong。 */
  --line-control: #7E8E9B;

  /* ── 状态色 ────────────────────────────────────────────────────────────
     *-bg 为浅色底；*-text 为在对应浅底上达到 4.5:1 的小字色。
     图标、圆点、左边框可继续使用基础状态色，保持语义统一。 */
  --success: #2F7D5D;
  --success-bg: #EAF4EF;
  --success-text: #2A7254;

  --warning: #A96D1F;
  --warning-bg: #FBF1E2;
  --warning-text: #986019;

  --danger: #B23E2F;
  --danger-bg: #FAEBE8;
  --danger-text: var(--danger);

  --info: #2E627F;
  --info-bg: #EAF2F7;
  --info-text: var(--info);

  /* ── 深色侧栏 / 浮层 ───────────────────────────────────────────────── */
  --sidebar-bg: var(--ink-900);
  --sidebar-bg-hover: rgba(255, 255, 255, 0.06);
  --sidebar-bg-active: var(--ink-800);
  --sidebar-text: #DCE5EB;
  --sidebar-text-muted: #93A5B3;
  --sidebar-line: rgba(255, 255, 255, 0.08);
  --sidebar-accent: var(--gold-400);
  --backdrop: rgba(8, 23, 37, 0.52);

  /* ── 字体族（全部为系统字体，离线可用） ──────────────────────────────
     中文正文使用无衬线系统字体；编号、金额、指标使用等宽/工程感字体，
     并配合 font-variant-numeric: tabular-nums 使用。 */
  --font-sans: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", "Source Han Sans SC", "Hiragino Sans GB", sans-serif;
  --font-mono: "DIN Alternate", "Bahnschrift", "Consolas", "SFMono-Regular", monospace;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ── 字号 / 行高（12 / 13 / 14 / 16 / 20 / 28 / 40） ─────────────────
     14px 为后台正文基准；12/13px 仅用于辅助说明和表格元信息；
     20px 为卡片标题；28/40px 为页面标题与登录页展示标题。 */
  --fs-12: 12px;
  --lh-12: 18px;
  --fs-13: 13px;
  --lh-13: 20px;
  --fs-14: 14px;
  --lh-14: 22px;
  --fs-16: 16px;
  --lh-16: 24px;
  --fs-20: 20px;
  --lh-20: 28px;
  --fs-28: 28px;
  --lh-28: 38px;
  --fs-40: 40px;
  --lh-40: 52px;

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-caps: 0.14em;

  /* ── 间距（4px 基准） ─────────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ── 圆角 ─────────────────────────────────────────────────────────────
     8px 用于按钮、输入框、标签等小控件；12px 用于卡片/面板。 */
  --radius-xs: 4px;
  --radius-control: 8px;
  --radius-card: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* ── 阴影（只保留两级，避免多层叠加导致脏灰） ─────────────────────── */
  --shadow-1: 0 1px 2px rgba(8, 23, 37, 0.04), 0 4px 12px rgba(8, 23, 37, 0.05);
  --shadow-2: 0 2px 4px rgba(8, 23, 37, 0.06), 0 12px 32px rgba(8, 23, 37, 0.12);
  --shadow-card: var(--shadow-1);
  --shadow-overlay: var(--shadow-2);

  /* ── 焦点提示 ─────────────────────────────────────────────────────────
     浅色表面用深海军蓝外框；深色侧栏/深色面板用暖金外框。
     两者都达到 3:1 以上的非文本对比度。 */
  --focus-ring: var(--ink-700);
  --focus-ring-on-dark: var(--gold-300);
  --focus-halo: rgba(184, 148, 88, 0.28);

  /* ── 布局尺寸 ─────────────────────────────────────────────────────────
     --layout-max 为内容区最大宽度；--login-card-width 为登录卡片宽度。
     侧栏在 ≥900px 展开展示，<900px 切换为抽屉；折叠态为 76px。 */
  --layout-max: 1440px;
  --layout-content-max: 1200px;
  --layout-reading: 760px;
  --auth-panel-width: 440px;
  --auth-card-width: 420px;
  --sidebar-width: 248px;
  --sidebar-width-collapsed: 76px;
  --topbar-height: 64px;
  --table-row-height: 48px;

  /* ── 层级 ─────────────────────────────────────────────────────────────
     只在需要定位的组件中使用，避免随意写 9999。 */
  --z-base: 0;
  --z-sticky: 20;
  --z-dropdown: 40;
  --z-sidebar: 50;
  --z-overlay: 60;
  --z-modal: 80;
  --z-toast: 100;

  /* ── 动效：只使用 160ms / 240ms 两档 ──────────────────────────────── */
  --motion-fast: 160ms;
  --motion-base: 240ms;
  --ease-standard: cubic-bezier(0.2, 0.7, 0.3, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* 减少动态效果：系统开启后，所有使用动效变量的过渡/动画近似即时完成。
   业务 CSS 仍应为 animation 设置可理解的非动画终态。 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0.01ms;
    --motion-base: 0.01ms;
  }
}