/*
 * Lianghua Pages 设计 token + 基础样式。
 * 平台自动注入到每个页面；所有基础样式都包在 :where() 里（特异性为 0），页面可以直接覆盖。
 */
:root {
  --pk-bg: #f6f6f3;
  --pk-surface: #ffffff;
  --pk-surface-2: #f0f0ec;
  --pk-surface-3: #e7e7e2;
  --pk-text: #1b1c20;
  --pk-text-muted: #62646c;
  --pk-text-subtle: #8b8d95;
  --pk-border: #e2e2dc;
  --pk-border-strong: #cfcfc8;
  --pk-accent: #5046e5;
  --pk-accent-hover: #4338ca;
  --pk-accent-soft: #eeedfd;
  --pk-accent-contrast: #ffffff;
  --pk-success: #16794a;
  --pk-success-soft: #e3f4ea;
  --pk-warning: #a85a06;
  --pk-warning-soft: #fcf0de;
  --pk-danger: #c23a3a;
  --pk-danger-soft: #fbe6e6;
  --pk-focus: 0 0 0 3px color-mix(in srgb, var(--pk-accent) 30%, transparent);
  --pk-shadow-sm: 0 1px 2px rgb(20 20 30 / 0.06);
  --pk-shadow: 0 1px 2px rgb(20 20 30 / 0.05), 0 6px 20px rgb(20 20 30 / 0.07);
  --pk-shadow-lg: 0 10px 40px rgb(20 20 30 / 0.16);

  --pk-font: "Inter", ui-sans-serif, system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --pk-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --pk-text-xs: 12px;
  --pk-text-sm: 13px;
  --pk-text-md: 15px;
  --pk-text-lg: 18px;
  --pk-text-xl: 24px;
  --pk-text-2xl: 32px;

  --pk-space-1: 4px;
  --pk-space-2: 8px;
  --pk-space-3: 12px;
  --pk-space-4: 16px;
  --pk-space-5: 24px;
  --pk-space-6: 32px;
  --pk-space-7: 48px;

  --pk-radius-sm: 6px;
  --pk-radius: 10px;
  --pk-radius-lg: 14px;

  /* 分类色（图表 / 标签），深浅两套都满足对比度 */
  --pk-cat-1: #5046e5;
  --pk-cat-2: #0e8a7e;
  --pk-cat-3: #d9731a;
  --pk-cat-4: #c2417a;
  --pk-cat-5: #3f7fd9;
  --pk-cat-6: #7d8a1e;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pk-bg: #111215;
    --pk-surface: #1a1b1f;
    --pk-surface-2: #222328;
    --pk-surface-3: #2b2d33;
    --pk-text: #ececef;
    --pk-text-muted: #a0a2ab;
    --pk-text-subtle: #767882;
    --pk-border: #2d2f35;
    --pk-border-strong: #3c3e46;
    --pk-accent: #8d87fb;
    --pk-accent-hover: #a5a0fc;
    --pk-accent-soft: #25244a;
    --pk-accent-contrast: #12121c;
    --pk-success: #4cc68a;
    --pk-success-soft: #173326;
    --pk-warning: #f0a54a;
    --pk-warning-soft: #37280f;
    --pk-danger: #f07575;
    --pk-danger-soft: #3a1c1c;
    --pk-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --pk-shadow: 0 1px 2px rgb(0 0 0 / 0.35), 0 8px 24px rgb(0 0 0 / 0.35);
    --pk-shadow-lg: 0 12px 48px rgb(0 0 0 / 0.55);
    --pk-cat-1: #8d87fb;
    --pk-cat-2: #3cc2b3;
    --pk-cat-3: #f09a4c;
    --pk-cat-4: #ea78a8;
    --pk-cat-5: #6ea8f2;
    --pk-cat-6: #b5c24a;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --pk-bg: #111215;
  --pk-surface: #1a1b1f;
  --pk-surface-2: #222328;
  --pk-surface-3: #2b2d33;
  --pk-text: #ececef;
  --pk-text-muted: #a0a2ab;
  --pk-text-subtle: #767882;
  --pk-border: #2d2f35;
  --pk-border-strong: #3c3e46;
  --pk-accent: #8d87fb;
  --pk-accent-hover: #a5a0fc;
  --pk-accent-soft: #25244a;
  --pk-accent-contrast: #12121c;
  --pk-success: #4cc68a;
  --pk-success-soft: #173326;
  --pk-warning: #f0a54a;
  --pk-warning-soft: #37280f;
  --pk-danger: #f07575;
  --pk-danger-soft: #3a1c1c;
  --pk-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --pk-shadow: 0 1px 2px rgb(0 0 0 / 0.35), 0 8px 24px rgb(0 0 0 / 0.35);
  --pk-shadow-lg: 0 12px 48px rgb(0 0 0 / 0.55);
  --pk-cat-1: #8d87fb;
  --pk-cat-2: #3cc2b3;
  --pk-cat-3: #f09a4c;
  --pk-cat-4: #ea78a8;
  --pk-cat-5: #6ea8f2;
  --pk-cat-6: #b5c24a;
  color-scheme: dark;
}

/* ---------- 基础元素 ---------- */
:where(*, *::before, *::after) { box-sizing: border-box; }
:where(html) { -webkit-text-size-adjust: 100%; }
:where(body) {
  margin: 0;
  background: var(--pk-bg);
  color: var(--pk-text);
  font: 400 var(--pk-text-md)/1.6 var(--pk-font);
  -webkit-font-smoothing: antialiased;
}
:where(h1, h2, h3, h4) { margin: 0 0 var(--pk-space-3); line-height: 1.25; font-weight: 650; letter-spacing: -0.01em; }
:where(h1) { font-size: var(--pk-text-2xl); }
:where(h2) { font-size: var(--pk-text-xl); }
:where(h3) { font-size: var(--pk-text-lg); }
:where(p) { margin: 0 0 var(--pk-space-3); }
:where(a) { color: var(--pk-accent); text-decoration: none; }
:where(a:hover) { text-decoration: underline; }
:where(code, kbd, pre) { font-family: var(--pk-font-mono); font-size: 0.9em; }
:where(code) { background: var(--pk-surface-2); padding: 0.1em 0.35em; border-radius: 4px; }
:where(pre) { background: var(--pk-surface-2); padding: var(--pk-space-3); border-radius: var(--pk-radius); overflow: auto; }
:where(pre code) { background: none; padding: 0; }
:where(hr) { border: 0; border-top: 1px solid var(--pk-border); margin: var(--pk-space-5) 0; }
:where(img, svg, video, canvas) { max-width: 100%; }
:where(:focus-visible) { outline: none; box-shadow: var(--pk-focus); border-radius: var(--pk-radius-sm); }

:where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(button) {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--pk-space-2);
  min-height: 36px; padding: 0 var(--pk-space-4);
  background: var(--pk-surface); border: 1px solid var(--pk-border-strong); border-radius: var(--pk-radius-sm);
  font-weight: 550; cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
:where(button:hover) { background: var(--pk-surface-2); }
:where(button:disabled) { opacity: 0.5; cursor: not-allowed; }
:where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"]), select, textarea) {
  width: 100%; min-height: 36px; padding: var(--pk-space-2) var(--pk-space-3);
  background: var(--pk-surface); border: 1px solid var(--pk-border-strong); border-radius: var(--pk-radius-sm);
}
:where(input, select, textarea):focus { outline: none; border-color: var(--pk-accent); box-shadow: var(--pk-focus); }
:where(textarea) { min-height: 88px; resize: vertical; }
:where(input[type="checkbox"], input[type="radio"], input[type="range"]) { accent-color: var(--pk-accent); }
:where(label) { display: block; font-size: var(--pk-text-sm); font-weight: 550; color: var(--pk-text-muted); margin-bottom: var(--pk-space-1); }
:where(table) { width: 100%; border-collapse: collapse; font-size: var(--pk-text-sm); }
:where(th, td) { text-align: left; padding: var(--pk-space-2) var(--pk-space-3); border-bottom: 1px solid var(--pk-border); }
:where(th) { color: var(--pk-text-muted); font-weight: 600; }
:where(td) { font-variant-numeric: tabular-nums; }

/* ---------- 组件类 ---------- */
:where(.pk-container) { max-width: 960px; margin: 0 auto; padding: var(--pk-space-5) var(--pk-space-4) var(--pk-space-7); }
:where(.pk-card) { background: var(--pk-surface); border: 1px solid var(--pk-border); border-radius: var(--pk-radius-lg); padding: var(--pk-space-5); box-shadow: var(--pk-shadow-sm); }
:where(.pk-stack) { display: flex; flex-direction: column; gap: var(--pk-space-3); }
:where(.pk-row) { display: flex; align-items: center; gap: var(--pk-space-3); flex-wrap: wrap; }
:where(.pk-grid) { display: grid; gap: var(--pk-space-4); grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }
:where(.pk-muted) { color: var(--pk-text-muted); }
:where(.pk-small) { font-size: var(--pk-text-sm); }
:where(.pk-btn) {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--pk-space-2);
  min-height: 36px; padding: 0 var(--pk-space-4); border-radius: var(--pk-radius-sm);
  border: 1px solid var(--pk-border-strong); background: var(--pk-surface); color: var(--pk-text);
  font-weight: 550; font-size: var(--pk-text-sm); cursor: pointer; text-decoration: none; white-space: nowrap;
}
:where(.pk-btn:hover) { background: var(--pk-surface-2); text-decoration: none; }
:where(.pk-btn-primary) { background: var(--pk-accent); border-color: var(--pk-accent); color: var(--pk-accent-contrast); }
:where(.pk-btn-primary:hover) { background: var(--pk-accent-hover); border-color: var(--pk-accent-hover); }
:where(.pk-btn-danger) { color: var(--pk-danger); }
:where(.pk-btn-sm) { min-height: 28px; padding: 0 var(--pk-space-3); font-size: var(--pk-text-xs); }
:where(.pk-badge) {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px;
  font-size: var(--pk-text-xs); font-weight: 600; background: var(--pk-surface-2); color: var(--pk-text-muted);
}
:where(.pk-badge-accent) { background: var(--pk-accent-soft); color: var(--pk-accent); }
:where(.pk-badge-success) { background: var(--pk-success-soft); color: var(--pk-success); }
:where(.pk-badge-warning) { background: var(--pk-warning-soft); color: var(--pk-warning); }
:where(.pk-badge-danger) { background: var(--pk-danger-soft); color: var(--pk-danger); }
:where(.pk-empty) { padding: var(--pk-space-6) var(--pk-space-4); text-align: center; color: var(--pk-text-muted); }

@media (prefers-reduced-motion: reduce) {
  :where(*) { transition: none !important; animation: none !important; }
}