@tailwind base;
@tailwind components;
@tailwind utilities;

/* Base styles | 基础样式 */
:root {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.5;
  font-weight: 400;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body, #app {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Light mode variables | 浅色模式变量 */
:root {
  --bg-primary: #f3f6f8;
  --bg-secondary: rgba(255, 255, 255, 0.82);
  --bg-tertiary: rgba(229, 236, 240, 0.82);
  --text-primary: #111827;
  --text-secondary: #667085;
  --text-tertiary: #98a2b3;
  --border-color: rgba(17, 24, 39, 0.1);
  --accent-color: #07a5a5;
  --accent-hover: #078b8b;
}

/* Dark mode variables | 深色模式变量 */
.dark {
  --bg-primary: #0b1117;
  --bg-secondary: rgba(20, 28, 37, 0.86);
  --bg-tertiary: rgba(42, 54, 66, 0.86);
  --text-primary: #f7fafc;
  --text-secondary: #a6b0bb;
  --text-tertiary: #77828e;
  --border-color: rgba(255, 255, 255, 0.12);
  --accent-color: #2dd4bf;
  --accent-hover: #14b8a6;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color 0.3s, color 0.3s;
}

header,
.glass-panel {
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}

/* Vue Flow styles override | Vue Flow 样式覆盖 */
.vue-flow {
  background-color: var(--bg-primary);
}

.vue-flow__node {
  border-radius: 8px;
  /* box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); */
}
.vue-flow__node.selected {
  /* border: 1px solid green; */
}

.vue-flow__edge-path {
  stroke: var(--border-color);
  stroke-width: 2;
}

.vue-flow__handle {
  width: 10px;
  height: 10px;
  background-color: var(--accent-color) !important;
  border: 2px solid var(--bg-secondary);
}
