/* ==========================================================================
   火锅 AI STUDIO — design-tokens.css
   唯一的设计变量来源。所有页面样式只引用这里的变量，不再手写颜色/圆角/字号数值。
   替换目标：styles.css / saas-final.css / liquid-glass.css / image-flow.css
   里散落的自定义颜色、圆角、字号声明，逐步迁移到引用这里的变量。
   ========================================================================== */

:root {

  /* ---------------------------------------------------------------------
     颜色 — 鸳鸯锅双色系统
     clear（清汤青）= 主色，日常操作、常规导航态
     spicy（红汤绛）= 唯一强调色，只用于"火锅创作"旗舰入口和真正需要突出的场景
     danger / warning 是独立的功能色，不复用 spicy，避免"错误提示"和"品牌强调"混淆
  --------------------------------------------------------------------- */
  --ink: #17211D;
  --ink-soft: #3A443F;
  --mist: #6E7A73;
  --paper: #F6F3EC;
  --surface: #FFFFFF;
  --line: #E7E1D3;
  --line-strong: #D8D0BE;

  --clear: #0E6B5C;
  --clear-hover: #0B5A4E;
  --clear-ink: #084E43;
  --clear-soft: #E3F1EC;

  --spicy: #96323D;
  --spicy-hover: #832B35;
  --spicy-ink: #6F2029;
  --spicy-soft: #F7E9E8;

  --danger: #B3261E;
  --danger-soft: #FBEAE8;
  --warning: #B7791F;
  --warning-soft: #FBF3E1;

  /* ---------------------------------------------------------------------
     间距刻度 — 只有 7 档，页面里不再出现别的 px 数值
  --------------------------------------------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* ---------------------------------------------------------------------
     圆角刻度 — 只有 4 档
  --------------------------------------------------------------------- */
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-pill: 999px;

  /* ---------------------------------------------------------------------
     字号刻度 — 只有 8 档
  --------------------------------------------------------------------- */
  --f-cap: 12px;
  --f-sm: 13px;
  --f-base: 14px;
  --f-md: 16px;
  --f-lg: 20px;
  --f-xl: 28px;
  --f-2xl: 36px;
  --f-3xl: 44px;

  --lh-tight: 1.25;
  --lh-base: 1.55;

  /* ---------------------------------------------------------------------
     字体
     --font-ui   中文界面正文，走系统字体，不额外加载中文 webfont（体积太大）
     --font-spec 模型名 / 数字 / 英文标签专用，制造"规格标签"的识别性
  --------------------------------------------------------------------- */
  --font-ui: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", sans-serif;
  --font-spec: "Space Grotesk", var(--font-ui);

  /* ---------------------------------------------------------------------
     实心表面的阴影（普通卡片用这个，不用玻璃阴影）
  --------------------------------------------------------------------- */
  --shadow-card: 0 1px 2px rgba(23, 33, 29, 0.06), 0 8px 24px rgba(23, 33, 29, 0.06);
  --shadow-modal: 0 24px 64px rgba(23, 33, 29, 0.22);

  /* ---------------------------------------------------------------------
     玻璃材质 — 只给"浮在内容之上"的控件用
     适用：悬浮输入框、下拉菜单、抽屉、弹层提示、移动端侧边栏
     禁用：画廊图片/视频卡片本体、消息气泡背景、页面基础背景、表单控件本身
     文字永远不直接放在 --glass-bg 上，要垫一层 --glass-inner
  --------------------------------------------------------------------- */
  --glass-bg: linear-gradient(180deg, rgba(232,244,240,0.62), rgba(255,255,255,0.42));
  --glass-blur: blur(22px) saturate(170%);
  --glass-highlight: inset 0 1px 0 rgba(255,255,255,0.85), inset 0 0 0 1px rgba(255,255,255,0.22);
  --glass-shadow: 0 22px 60px rgba(9,20,17,0.28), 0 2px 8px rgba(9,20,17,0.12);
  --glass-inner: rgba(255,255,255,0.72);
}

/* 不支持 backdrop-filter 的浏览器，玻璃组件统一退回实心米白，不做半透明 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-surface {
    background: var(--paper) !important;
  }
}

/* 玻璃表面的公用基础类，浮层类组件直接加这个 class，再各自定义圆角/尺寸 */
.glass-surface {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-highlight), var(--glass-shadow);
}