:root {
  --bg: #f8fafc; --fg: #0f172a; --muted: #64748b;
  --card: #ffffff; --border: #e2e8f0; --accent: #0f172a; --accent-soft: rgba(15,23,42,0.06);
  --green: #16a34a; --gray: #9ca3af; --danger: #dc2626; --danger-hover: #b91c1c;
  --amber: #b45309;   
  --state-blue: #2563eb; --state-yellow: #d97706;   
  --demo-border: #ddd3f5; --demo-card-bg: #fdfbff;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px; --radius-pill: 999px;
}
[data-theme="dark"] {
  --bg: #0a0e14; --fg: #e2e8f0; --muted: #94a3b8;
  --card: #0e1420; --border: #1e293b; --accent: #e2e8f0; --accent-soft: rgba(226,232,240,0.06);
  --green: #22c55e; --gray: #52525b;
  --state-blue: #60a5fa; --state-yellow: #fbbf24;
  --demo-border: #4c3d7a; --demo-card-bg: #221c33;
}


:root {
  --dw-panel2: color-mix(in srgb, var(--fg) 5%, var(--card));
  --dw-bub: color-mix(in srgb, var(--fg) 4%, var(--card));
  --dw-bubme: color-mix(in srgb, var(--accent) 7%, var(--card));
  --dw-me-bord: color-mix(in srgb, var(--accent) 30%, transparent);
  --dw-code: color-mix(in srgb, var(--bg) 85%, var(--fg) 15%);
  --dw-err-bg: color-mix(in srgb, var(--danger) 10%, transparent);
  --dw-err-bd: color-mix(in srgb, var(--danger) 35%, transparent);
  --dw-info-bg: color-mix(in srgb, var(--green) 10%, transparent);
  --dw-info-bd: color-mix(in srgb, var(--green) 35%, transparent);
  --dw-think: var(--state-yellow);
  --dw-tool: var(--fg);
  --dw-ava-bg: var(--accent-soft);
  --dw-ava-fg: var(--accent);
  --dw-accent: var(--accent);
  
  --fs-label:12.5px;
  --fs-axis:calc(var(--fs-label) * 0.5);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"PingFang SC",monospace}