/* ============================================================
   爬宠饲养知识库 · 结构令牌（主题无关）
   颜色令牌由 styles/themes/*.css 覆盖，主题切换 = 换 data-theme
   来源：Linear / Notion / VoltAgent 三套真实设计系统的令牌体系
   ============================================================ */

:root {
  /* ---------- 字体 ---------- */
  --font-sans: "PingFang SC", "HarmonyOS Sans SC", "Hiragino Sans GB",
    "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Songti SC", "STSong", "Source Han Serif SC",
    "Noto Serif CJK SC", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* ---------- 字号 ---------- */
  --fs-display: 28px;
  --fs-h2: 21px;
  --fs-h3: 17px;
  --fs-body: 15px;
  --fs-sm: 14px;
  --fs-xs: 12.5px;
  --fs-micro: 11px;

  --lh-tight: 1.28;
  --lh-body: 1.74;

  --tracking-tight: -0.011em;
  --tracking-wide: 0.08em;

  /* ---------- 间距（4 倍数） ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ---------- 圆角 ---------- */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* ---------- 布局 ---------- */
  --sidebar-w: 280px;
  --sidebar-w-collapsed: 56px;
  --topbar-h: 60px;
  --reading-w: 72ch;
  --rail-w: 176px;
  --content-pad-x: var(--sp-10);

  /* ---------- 动效 ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-mid: 220ms;
  --dur-slow: 420ms;

  /* ---------- 层级 ---------- */
  --z-rail: 10;
  --z-sidebar: 20;
  --z-topbar: 30;
  --z-scrim: 60;
  --z-modal: 80;

  /* ---------- 语义色默认值（T1 Obsidian Glass） ---------- */
  --c-bg: #08090a;
  --c-bg-elev: #0f1011;
  --c-surface: #15171a;
  --c-surface-2: #1c1f23;
  --c-glass: rgba(15, 16, 17, 0.66);
  --c-glass-border: rgba(255, 255, 255, 0.08);

  --c-text: #f2f4f7;
  --c-text-2: #c3c9d4;
  --c-text-3: #8a8f98;
  --c-text-4: #62666d;

  --c-accent: #7170ff;
  --c-accent-soft: rgba(113, 112, 255, 0.14);
  --c-accent-2: #22d3ee;
  --c-accent-contrast: #ffffff;

  --c-border: rgba(255, 255, 255, 0.07);
  --c-border-strong: rgba(255, 255, 255, 0.14);
  --c-hover: rgba(255, 255, 255, 0.045);

  --c-grade-a: #34d399;
  --c-grade-b: #fbbf24;
  --c-grade-c: #f87171;
  --c-warn-bg: rgba(251, 191, 36, 0.1);
  --c-warn-border: rgba(251, 191, 36, 0.3);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 8px 24px -8px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 0 0 1px rgba(113, 112, 255, 0.22),
    0 12px 40px -12px rgba(113, 112, 255, 0.35);

  --selection-bg: rgba(113, 112, 255, 0.28);
}

/* ---------- 数据级徽标（跨主题共用语义） ---------- */
:root {
  --grade-a-fg: var(--c-grade-a);
  --grade-b-fg: var(--c-grade-b);
  --grade-c-fg: var(--c-grade-c);
}