/* ============================================================
   base.css — CHEFSMART 编辑器 v7
   包含：CSS Reset、铁律（Iron Rules）、设计变量（:root）、
         Canvas 配色预设、通用工具类、全局排版、滚动条
   ============================================================ */

/* ── CSS Reset ── */
*, *::before, *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
html { text-align: left; }

/* ============================================================
   IRON RULES
   ============================================================ */

/* ── Canvas VI: square corners + zero motion ── */
.canvas, .canvas * { border-radius: 0 !important; }
.canvas, .canvas *, .canvas *::before, .canvas *::after {
  animation: none !important;
  transition: none !important;
}

/* ── UI: border-radius 清零（铁律：编辑器 UI 禁止圆角）── */
/* [FIX-v7.refactor] 历史遗留 border-radius: 10px 全部清零 */
.pb-l1-card, .mod-card, .pb-l3-content,
input, textarea, select,
button, .btn {
  border-radius: 0;
}
.page0-dialog { border-radius: 0; }
.page0-field { border-radius: 0; }
.pc-toolbar { border-radius: 0; }

/* ============================================================
   DESIGN TOKENS — v6 color palette + layout structure
   ============================================================ */
:root {
  /* v6 exact color palette */
  --color-primary: #0ABAB5;
  --color-primary-hover: #089E99;
  --color-primary-light: #E6F7F6;
  /* Legacy aliases (kept for backward compat in CSS) */
  --ui-primary: #0ABAB5;
  --ui-primary-dark: #089E99;
  --ui-primary-hover: #089E99;
  --ui-primary-tint: #E6F7F6;
  /* Layout surfaces */
  --ui-sidebar: #FFFFFF;
  --ui-sidebar-hover: #F0F3F6;
  --ui-white: #FFFFFF;
  --ui-bg: #F5F7FA;
  --ui-surface: #FAFBFC;
  --ui-border: #E5E7EB;
  /* Canvas border-radius control */
  --cv-radius: 0px;

  /* Typography — v6 exact */
  --ui-text: #111827;
  --ui-sub: #6B7280;
  --ui-muted: #9CA3AF;
  --ui-text-secondary: #6B7280;
  --ui-gold: #C0C0C0;
  /* v6 shadow system */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
  --shadow-card: 0 1px 3px rgba(0,0,0,0.08);
}

/* ============================================================
   Canvas VI — 4 Color Presets (V6 system)
   ============================================================ */
.canvas, .canvas.preset-blackgrey {
  --cv-primary: #1D1D1F;
  --cv-primary-rgb: 29, 29, 31;
  --cv-primary-dark: #111827;
  --cv-primary-tint: #F3F4F6;
  --cv-tag-text: #4B5563;
  --cv-tag-border: #D1D5DB;
  --cv-divider: #E5E7EB;
}
.canvas.preset-teal {
  --cv-primary: #0ABAB5;
  --cv-primary-rgb: 10, 186, 181;
  --cv-primary-dark: #089E99;
  --cv-primary-tint: #E6F7F6;
  --cv-tag-text: #4B5563;
  --cv-tag-border: #A7DAD6;
  --cv-divider: #D1EEEC;
}
.canvas.preset-gold {
  --cv-primary: #F37021;
  --cv-primary-rgb: 243, 112, 33;
  --cv-primary-dark: #C85A10;
  --cv-primary-tint: #FFF0E6;
  --cv-tag-text: #C85A10;
  --cv-tag-border: #F37021;
  --cv-divider: #F37021;
}
.canvas.preset-red {
  --cv-primary: #DC2626;
  --cv-primary-rgb: 220, 38, 38;
  --cv-primary-dark: #B91C1C;
  --cv-primary-tint: #FEF2F2;
  --cv-tag-text: #4B5563;
  --cv-tag-border: #FECACA;
  --cv-divider: #FECACA;
}

/* ── Canvas border-radius control via --cv-radius ── */
.canvas .cv-mod { border-radius: var(--cv-radius) !important; }
.canvas .v6-img { border-radius: var(--cv-radius) !important; }
.canvas .v6-img-placeholder { border-radius: var(--cv-radius) !important; }
.canvas .v6-tag { border-radius: var(--cv-radius) !important; }
.canvas .v6-tag-outline { border-radius: var(--cv-radius) !important; }
.canvas .v6-stat-card { border-radius: var(--cv-radius) !important; }
.canvas .v6-promise-item { border-radius: var(--cv-radius) !important; }
.canvas .v6-zero-card { border-radius: var(--cv-radius) !important; }
.canvas .v6-step { border-radius: var(--cv-radius) !important; }
.canvas .v6-faq { border-radius: var(--cv-radius) !important; }
.canvas .v6-table { border-radius: var(--cv-radius) !important; }
.canvas .delivery-flow > div > div { border-radius: var(--cv-radius) !important; }
.canvas .m01-flat-bar-inner { border-radius: var(--cv-radius) !important; }
.canvas .m01-field { border-radius: var(--cv-radius) !important; }
.canvas .m01-tags { border-radius: var(--cv-radius) !important; }
.canvas .v6-person-avatar { border-radius: var(--cv-radius) !important; }
.canvas .v6-usage-card { border-radius: var(--cv-radius) !important; }
.canvas .v6-origin-card { border-radius: var(--cv-radius) !important; }
.canvas .v6-product-grid { border-radius: var(--cv-radius) !important; }
.canvas .v6-warranty-item { border-radius: var(--cv-radius) !important; }
.canvas .v6-img-card { border-radius: var(--cv-radius) !important; }
.canvas .v6-nutrition-card { border-radius: var(--cv-radius) !important; }

/* ============================================================
   BASE — Global Typography
   ============================================================ */
html, body {
  height: 100%; overflow: hidden;
  font-family: -apple-system, "SF Pro Display", "Helvetica Neue",
               "PingFang SC", "Noto Sans SC", "Source Han Sans SC", sans-serif;
  font-size: 13px; color: var(--ui-text); background: #FFFFFF;
  -webkit-font-smoothing: antialiased; line-height: 1.5;
}

/* ============================================================
   PAGE 1 — Main Layout
   ============================================================ */
.page1 { height: 100%; display: flex; flex-direction: column; }

/* 3-COLUMN MAIN — fixed ratios */
.main { flex: 1; display: flex; overflow: hidden; }

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #D0D0D0; }
::-webkit-scrollbar-thumb:hover { background: var(--ui-gold); }

/* ============================================================
   UTILITY CLASSES
   ============================================================ */
.hidden { display: none !important; }

/* ── V6 Inline Editing (通用) ── */
.cv-editable {
  cursor: text;
  outline: none;
  position: relative;
}
.cv-editable:hover {
  outline: 1px dashed rgba(0,0,0,0.15);
  outline-offset: 2px;
}
.cv-editable:focus {
  outline: 1px dashed var(--cv-primary);
  outline-offset: 2px;
}

/* Legacy transition — keep for data-trans sync, hidden */
.cv-transition { display: none; }