/* ============================================================================
   LANN Product Design System v1 — modes.css
   Four touchpoint modes on top of the shared token + component base.
   Same brand genes (color/font/line); different density + brand weight.
     .lann-mode-public      客户预约 / 公开排行榜 / 公开分享入口
     .lann-mode-management  mgmtdash / b2b CRM / 权限·目标·KPI·排行·经营全景
     .lann-mode-field       SOM / daily-report / 店长移动台 / booking desk
     .lann-mode-artifact    复盘报告 / PPT-like summary / share / 管理 readout
   ========================================================================== */

/* ---- Public Brand: stronger brand field, generous space, still legible forms ---- */
.lann-mode-public {
  --lann-pad: var(--lann-space-spacious);
  background:
    radial-gradient(120% 80% at 50% -10%, var(--lann-lavender-100), transparent 60%),
    var(--lann-cream);
}
.lann-mode-public h1,
.lann-mode-public .lann-hero-title {
  font-family: var(--lann-font-display);
  font-weight: 400; letter-spacing: 0.01em; color: var(--lann-lavender-900);
}
.lann-mode-public .lann-card { box-shadow: var(--lann-shadow-soft); }

/* ---- Management Work: high density, table-first, brand from color not decoration ---- */
.lann-mode-management {
  --lann-pad: var(--lann-space-normal);
  --lann-management-font-size: 13px;
  --lann-management-table-font-size: 12.5px;
  --lann-management-page-title: 20px;
  --lann-management-panel-title: 14px;
  background: var(--lann-cream);
  font-size: var(--lann-management-font-size);
}
.lann-mode-management .lann-card { padding: 12px; }
.lann-mode-management .lann-btn {
  min-height: 34px;
  padding: 6px 12px;
}
.lann-mode-management .lann-table th,
.lann-mode-management .lann-table td {
  padding: 7px 10px;
  font-size: var(--lann-management-table-font-size);
} /* tighter scan rhythm */
.lann-mode-management h1, .lann-mode-management h2 {
  font-family: var(--lann-font-body); /* Work Layer: sans headings, Red Rose only for key numerals */
}
.lann-mode-management .lann-kpi {
  font-family: var(--lann-font-display); font-weight: 400;
  font-variant-numeric: tabular-nums; color: var(--lann-ink);
}

/* ---- Field Ops: mobile-first, big touch targets, fast, warm but not ceremonial ---- */
.lann-mode-field {
  --lann-pad: var(--lann-space-normal);
  background: var(--lann-cream);
}
.lann-mode-field .lann-btn { min-height: 44px; width: 100%; }
.lann-mode-field .lann-input, .lann-mode-field .lann-select { min-height: 44px; font-size: 16px; } /* avoid iOS zoom */
.lann-mode-field .lann-card { padding: var(--lann-space-normal); border-radius: var(--lann-radius-card); }

/* ---- Artifact: strongest Brand Layer — wordmark, lavender field, Red Rose ---- */
.lann-mode-artifact {
  --lann-pad: var(--lann-space-spacious);
  background: var(--lann-cream);
}
.lann-mode-artifact h1,
.lann-mode-artifact h2,
.lann-mode-artifact .lann-artifact-title {
  font-family: var(--lann-font-display); font-weight: 400; color: var(--lann-lavender-900);
}
.lann-mode-artifact .lann-hero {
  color: var(--lann-cream);
  background: linear-gradient(135deg, var(--lann-lavender-900), var(--lann-lavender-700));
  border-radius: var(--lann-radius-card);
  padding: var(--lann-space-presentation) var(--lann-space-spacious);
}
.lann-mode-artifact .lann-hero .lann-wordmark { height: 26px; }