/* ============================================================
   房源台账 · Design Tokens
   唯一变量来源，index.html 与 design-system.html 共用。
   命名分三层：原始值（--tone-*）→ 语义（--surface/--ink/--brand）→ 组件内引用。
   ============================================================ */

:root {
  color-scheme: light;

  /* ---------- 中性色：冷灰白，不用暖米色 ---------- */
  --tone-0: #ffffff;
  --tone-25: #f8f9fb;
  --tone-50: #f1f3f7;
  --tone-100: #edf0f5;
  --tone-150: #e3e7ee;
  --tone-200: #cfd6e2;
  --tone-300: #7a8494;
  --tone-400: #667085;
  --tone-500: #5b6b7f;
  --tone-700: #2f3a4a;
  --tone-900: #182234;

  /* ---------- 语义表面与文字 ---------- */
  --canvas: #f6f7f9;
  --surface: var(--tone-0);
  --surface-sunken: var(--tone-25);
  --surface-muted: var(--tone-50);
  --line: var(--tone-150);
  --line-strong: var(--tone-200);
  --ink: var(--tone-900);
  --ink-2: var(--tone-500);
  --ink-3: var(--tone-400);
  --ink-inverse: var(--tone-0);

  /* ---------- 品牌：深青绿，唯一强调色 ---------- */
  --brand: #2f6bff;
  --brand-hover: #1f55e0;
  --brand-active: #1946b8;
  --brand-soft: #eaf1ff;
  --brand-soft-line: #c9d9ff;
  --brand-ink: #123a8a;
  --on-brand: #ffffff;
  --focus: #2f6bff;

  /* ---------- 房源状态语义（颜色 + 文字 + 图标三重编码） ---------- */
  --status-available: #1b7f5a;
  --status-available-soft: #e8f5ee;
  --status-available-line: #b9e0cb;

  --status-pending: #a15c00;
  --status-pending-soft: #fff3d8;
  --status-pending-line: #f0d39b;

  --status-expiring: #b93832;
  --status-expiring-soft: #fdecea;
  --status-expiring-line: #f2c4bf;

  --status-leased: #3557b7;
  --status-leased-soft: #e6edff;
  --status-leased-line: #b9c9f2;

  /* ---------- 字体 ---------- */
  --font-sans: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC",
    "Source Han Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-num: "SF Pro Text", "Helvetica Neue", "PingFang SC", system-ui,
    sans-serif;

  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-3xl: 36px;
  --text-display: 46px;

  --leading-tight: 1.2;
  --leading-snug: 1.4;
  --leading-body: 1.65;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* ---------- 4 / 8 间距网格 ---------- */
  --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;
  --space-20: 80px;

  /* ---------- 形状与层次 ---------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-full: 999px;

  --shadow-1: 0 1px 2px rgba(19, 32, 31, 0.05);
  --shadow-2: 0 6px 18px rgba(19, 32, 31, 0.07);
  --shadow-3: 0 18px 40px rgba(19, 32, 31, 0.13);

  /* ---------- 动效 ---------- */
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --dur-slow: 300ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.5, 0, 0.75, 0);
  --stagger: 35ms;

  /* ---------- 布局 ---------- */
  --sidebar-w: 248px;
  --topbar-h: 56px;
  --bottom-nav-h: 64px;
  --content-max: 1360px;
  --page-gutter: var(--space-8);

  /* ---------- 描边 ---------- */
  --hairline: 1px solid var(--line);
  --ring: 0 0 0 3px rgba(15, 110, 102, 0.28);
}

@media (max-width: 1023px) {
  :root {
    --page-gutter: var(--space-5);
    --topbar-h: 52px;
  }
}

@media (max-width: 767px) {
  :root {
    --page-gutter: var(--space-4);
    --text-2xl: 24px;
    --text-3xl: 30px;
    --text-display: 34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --stagger: 0ms;
  }
}