/* 语言: CSS3 */

/* === 1. CSS 变量与设计系统定义 === */
:root {
  --primary-color: #2563eb;       /* 交互主色调 */
  --primary-hover: #1d4ed8;
  --bg-color: #f8fafc;            /* 页面背景色 */
  --surface-color: #ffffff;       /* 卡片/工具栏背景色 */
  --text-main: #0f172a;           /* 主文本颜色 */
  --text-muted: #64748b;          /* 辅助文本颜色 */
  --border-color: #e2e8f0;
  --radius-md: 8px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
}

/* 适配暗黑模式 (遵循操作系统偏好设置) */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #0f172a;
    --surface-color: #1e293b;
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --border-color: #334155;
  }
}

/* === 2. 字体与全局 Reset === */
/* 
  最佳实践：font-display: swap 
  作用：在本地 .woff2 字体下载完成前，先用系统默认字体展示文字，
  下载完成后无缝替换。这消除了白屏（FOIT）时间，Lighthouse 测速满分。
*/
@font-face {
  font-family: 'Inter';
  src: url('../fonts/font-inter.woff2') format('woff2');
  font-weight: 400 700;
  font-display: swap; 
}

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

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background-color: var(--bg-color);
  color: var(--text-main);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* === 3. 首页 Landing Page 样式 === */
header nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 2rem;
  background-color: var(--surface-color);
  border-bottom: 1px solid var(--border-color);
}

header nav h1 {
  font-size: 1.5rem;
  font-weight: 700;
}

header nav a {
  text-decoration: none;
  color: var(--primary-color);
  font-weight: 600;
}

.hero {
  max-width: 800px;
  margin: 4rem auto;
  text-align: center;
  padding: 0 1rem;
}

.hero h2 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.hero p {
  color: var(--text-muted);
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

.btn-primary {
  display: inline-block;
  background-color: var(--primary-color);
  color: #fff !important;
  padding: 0.8rem 1.5rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  font-weight: 600;
  transition: background-color 0.2s;
}

.btn-primary:hover {
  background-color: var(--primary-hover);
}

/* === 4. 工作台 Editor UI 样式 === */
#app {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.toolbar {
  width: 64px;
  background-color: var(--surface-color);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem 0;
  gap: 1rem;
}

.tool-btn {
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--text-main); /* SVG 图标将继承这个颜色 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.tool-btn:hover {
  background-color: var(--border-color);
}

/* 控制 SVG 的填充颜色跟随 CSS 文本色，方便暗黑模式自适应 */
.tool-btn svg {
  fill: currentColor; 
}

.canvas-container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #e5e5e5; /* 类似真实 PS 的深灰色背景区域 */
  background-image: linear-gradient(45deg, #ccc 25%, transparent 25%), 
                    linear-gradient(135deg, #ccc 25%, transparent 25%),
                    linear-gradient(45deg, transparent 75%, #ccc 75%),
                    linear-gradient(135deg, transparent 75%, #ccc 75%);
  background-size: 20px 20px;
  background-position: 0 0, 10px 0, 10px -10px, 0px 10px;
}

#main-canvas {
  background-color: #fff;
  box-shadow: var(--shadow-sm);
  cursor: crosshair;
}