/* Shared design tokens — 工具集 */
:root {
  color-scheme: light;
  --ink: #0b1220;
  --ink-2: #1e293b;
  --muted: #64748b;
  --muted-2: #94a3b8;
  --surface: rgba(255, 255, 255, 0.78);
  --surface-solid: #ffffff;
  --line: rgba(15, 23, 42, 0.08);
  --bg: #eef1f8;
  --bg-elevated: #ffffff;
  --panel-bg: rgba(255, 255, 255, 0.9);
  --chip-bg: #f1f5f9;
  --success-bg: #f0fdf4;
  --success-line: #bbf7d0;
  --success-ink: #15803d;
  --danger-bg: #fef2f2;
  --danger-line: #fecaca;
  --danger-ink: #b91c1c;
  --warn-bg: #fffbeb;
  --warn-line: #fde68a;
  --warn-ink: #b45309;
  --indigo: #4f46e5;
  --violet: #7c3aed;
  --emerald: #059669;
  --amber: #d97706;
  --sky: #0284c7;
  --radius: 22px;
  --radius-sm: 14px;
  --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.04);
  --shadow: 0 12px 40px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 24px 60px rgba(15, 23, 42, 0.14);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;

  /* Content column — home / category / tool pages share this width */
  --page-max: 1080px;
  --page-pad-x: 22px;
  --page-pad-y: 18px;
  --theme-toggle-icon: "☾";
}

/* Explicit light (after system-dark user override) */
html[data-theme="light"] {
  color-scheme: light;
}

/* Dark theme — user preference or system when unset */
html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e8edf7;
  --ink-2: #cbd5e1;
  --muted: #94a3b8;
  --muted-2: #64748b;
  --surface: rgba(30, 41, 59, 0.82);
  --surface-solid: #1e293b;
  --line: rgba(148, 163, 184, 0.14);
  --bg: #0b1220;
  --bg-elevated: #151c2c;
  --panel-bg: rgba(30, 41, 59, 0.92);
  --chip-bg: #243044;
  --success-bg: rgba(6, 78, 59, 0.35);
  --success-line: rgba(52, 211, 153, 0.35);
  --success-ink: #6ee7b7;
  --danger-bg: rgba(127, 29, 29, 0.35);
  --danger-line: rgba(248, 113, 113, 0.35);
  --danger-ink: #fca5a5;
  --warn-bg: rgba(120, 53, 15, 0.35);
  --warn-line: rgba(251, 191, 36, 0.35);
  --warn-ink: #fcd34d;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.45);
  --theme-toggle-icon: "☀";
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    color-scheme: dark;
    --ink: #e8edf7;
    --ink-2: #cbd5e1;
    --muted: #94a3b8;
    --muted-2: #64748b;
    --surface: rgba(30, 41, 59, 0.82);
    --surface-solid: #1e293b;
    --line: rgba(148, 163, 184, 0.14);
    --bg: #0b1220;
    --bg-elevated: #151c2c;
    --panel-bg: rgba(30, 41, 59, 0.92);
    --chip-bg: #243044;
    --success-bg: rgba(6, 78, 59, 0.35);
    --success-line: rgba(52, 211, 153, 0.35);
    --success-ink: #6ee7b7;
    --danger-bg: rgba(127, 29, 29, 0.35);
    --danger-line: rgba(248, 113, 113, 0.35);
    --danger-ink: #fca5a5;
    --warn-bg: rgba(120, 53, 15, 0.35);
    --warn-line: rgba(251, 191, 36, 0.35);
    --warn-ink: #fcd34d;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
    --shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.45);
    --theme-toggle-icon: "☀";
  }
}

html {
  color: var(--ink);
  background: var(--bg);
}

body {
  color: var(--ink);
  background: var(--bg);
}