/**
 * 语义 Token 层 — 主题引擎现代化地基
 *
 * 包含 @property 注册（原 tokens-register.css）和语义变量定义。
 * 所有颜色用 light-dark() 定义，按 color-scheme 自动取值。
 * 组件只需引用 var(--token)，不再需要 [data-theme="dark"] 覆盖。
 *
 * 加载顺序：tokens.css → themes.css → main-bundle.css / promptpro-bundle.css
 *
 * @layer 级联层声明：
 * - tokens：语义变量（本文件）
 * - base：全局底色
 * - components：组件样式（main-bundle.css, promptpro-bundle.css, admin.css）
 * - utilities：响应式/工具类（mobile-responsive.css）
 * - overrides：需要赢过 scoped 样式的 !important 规则（预留）
 */
@layer tokens, reset, base, components, utilities, overrides;

/* ════════════════════════════════════════════
   @property 注册 — 让 CSS 自定义属性可被 transition / View Transitions 插值
   initial-value 仅作为 fallback，实际值由下方 :root 的 light-dark() 提供。
   ════════════════════════════════════════════ */
@property --primary          { syntax: '<color>'; inherits: true; initial-value: #4F46E5; }
@property --primary-hover    { syntax: '<color>'; inherits: true; initial-value: #4338CA; }
@property --primary-light    { syntax: '<color>'; inherits: true; initial-value: rgba(79,70,229,0.08); }
@property --primary-medium   { syntax: '<color>'; inherits: true; initial-value: rgba(79,70,229,0.15); }
@property --primary-dark     { syntax: '<color>'; inherits: true; initial-value: #3730A3; }
@property --surface          { syntax: '<color>'; inherits: true; initial-value: #F8F7F4; }
@property --surface-raised   { syntax: '<color>'; inherits: true; initial-value: #FCFBF9; }
@property --surface-sunken   { syntax: '<color>'; inherits: true; initial-value: #F1F0EC; }
@property --surface-hover    { syntax: '<color>'; inherits: true; initial-value: #F5F5F0; }
@property --surface-active   { syntax: '<color>'; inherits: true; initial-value: #E5E5E0; }
@property --surface-selected { syntax: '<color>'; inherits: true; initial-value: rgba(79,70,229,0.10); }
@property --sidebar-bg       { syntax: '<color>'; inherits: true; initial-value: rgba(252,251,249,0.95); }
@property --text-primary     { syntax: '<color>'; inherits: true; initial-value: #1F2937; }
@property --text-secondary   { syntax: '<color>'; inherits: true; initial-value: #4B5563; }
@property --text-tertiary    { syntax: '<color>'; inherits: true; initial-value: #9CA3AF; }
@property --text-inverse     { syntax: '<color>'; inherits: true; initial-value: #FFFFFF; }
@property --border           { syntax: '<color>'; inherits: true; initial-value: rgba(0,0,0,0.06); }
@property --border-focus     { syntax: '<color>'; inherits: true; initial-value: rgba(79,70,229,0.4); }
@property --divider          { syntax: '<color>'; inherits: true; initial-value: rgba(0,0,0,0.06); }
@property --overlay          { syntax: '<color>'; inherits: true; initial-value: rgba(0,0,0,0.4); }
@property --accent-blue      { syntax: '<color>'; inherits: true; initial-value: #3B82F6; }
@property --accent-purple    { syntax: '<color>'; inherits: true; initial-value: #764BA2; }
@property --accent-red       { syntax: '<color>'; inherits: true; initial-value: #EF4444; }
@property --accent-yellow    { syntax: '<color>'; inherits: true; initial-value: #F59E0B; }
@property --success          { syntax: '<color>'; inherits: true; initial-value: #10B981; }
@property --danger           { syntax: '<color>'; inherits: true; initial-value: #EF4444; }
@property --warning          { syntax: '<color>'; inherits: true; initial-value: #F59E0B; }

/* ════════════════════════════════════════════
   语义变量 — 默认值与 theme-bg-7（浅色）/ theme-bg-mo-ye（深色）一致
   ════════════════════════════════════════════ */
:root {
  color-scheme: light dark;

  /* ── 强调色（由 themes.css 覆盖；默认翠绿 Emerald，与 theme-bg-4 一致） ── */
  --primary:        light-dark(#059669, #34D399);
  --primary-hover:  light-dark(#047857, #10B981);
  --primary-light:  light-dark(rgba(5,150,105,0.08), rgba(52,211,153,0.12));
  --primary-medium: light-dark(rgba(5,150,105,0.15), rgba(52,211,153,0.2));
  --primary-dark:   light-dark(#065F46, #059669);

  /* ── 面色 ── */
  --surface:          light-dark(#F8F7F4, #0F172A);
  --surface-raised:   light-dark(#FCFBF9, #1E293B);
  --surface-sunken:   light-dark(#F1F0EC, #0B1120);
  --surface-hover:    light-dark(#F5F5F0, rgba(51,65,85,0.6));
  --surface-active:   light-dark(#E5E5E0, rgba(71,85,105,0.8));
  --surface-selected: light-dark(rgba(5,150,105,0.10), rgba(52,211,153,0.15));
  --sidebar-bg:       light-dark(rgba(252,251,249,0.95), rgba(15,23,42,0.95));

  /* ── 文字色 ── */
  --text-primary:   light-dark(#1F2937, #E2E8F0);
  --text-secondary: light-dark(#4B5563, #94A3B8);
  --text-tertiary:  light-dark(#9CA3AF, #64748B);
  --text-inverse:   light-dark(#ffffff, #0F172A);

  /* ── 边框 / 分割线 ── */
  --border:       light-dark(rgba(31,41,55,0.08), #334155);
  --border-focus: light-dark(rgba(79,70,229,0.4), rgba(96,165,250,0.4));
  --divider:      light-dark(rgba(31,41,55,0.06), rgba(255,255,255,0.06));

  /* ── 阴影 ── */
  /* light-dark() 只接受 <color> 参数，阴影本体不能整体包进去：
     拆出阴影色变量，再由各档位组合（否则 var() 替换非法、阴影静默失效） */
  --shadow-color: light-dark(rgba(15, 23, 42, 0.07), rgba(0, 0, 0, 0.42));
  --shadow-sm:  0 1px 3px var(--shadow-color);
  --shadow-md:  0 4px 12px var(--shadow-color);
  --shadow-lg:  0 12px 40px var(--shadow-color);
  --shadow-xl:  0 20px 60px var(--shadow-color);

  /* ── 覆盖层 ── */
  --overlay: light-dark(rgba(0,0,0,0.4), rgba(0,0,0,0.6));
  --backdrop-blur: blur(20px);

  /* ── 强调色 ── */
  --accent-blue:   light-dark(#3B82F6, #60A5FA);
  --accent-purple: light-dark(#764ba2, #a78bfa);
  --accent-red:    light-dark(#EF4444, #F87171);
  --accent-yellow: light-dark(#F59E0B, #FBBF24);

  /* ── 语义状态色（独立于强调色，不随主题变） ── */
  --success:       light-dark(#10B981, #3FB950);
  --danger:        light-dark(#EF4444, #F85149);
  --warning:       light-dark(#F59E0B, #D29922);

  /* ── 状态色浅底（由状态色派生，随主题自动适配） ── */
  --danger-soft:   color-mix(in srgb, var(--danger) 10%, var(--surface-raised));
  --warning-soft:  color-mix(in srgb, var(--warning) 15%, transparent);
  --success-soft:  color-mix(in srgb, var(--success) 12%, transparent);
  --info-soft:     color-mix(in srgb, var(--accent-blue) 12%, transparent);
  --neutral-soft:  color-mix(in srgb, var(--text-tertiary) 12%, transparent);

  /* ── 第四级文字色（面包屑分隔符等弱化文本，介于 tertiary 与 divider 之间） ── */
  --text-quaternary: light-dark(#D1D5DB, #475569);

  /* ── 圆角 ── */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  /* ── 字体 ── */
  --font-system: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'SF Mono', 'Monaco', 'Menlo', 'Consolas', monospace;
}

/* ── 强制态覆盖（用户手选 light/dark 时 color-scheme 单值） ── */
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"]  { color-scheme: dark; }

/* 别名已全部迁移到规范变量名，向后兼容块移除 */

/* ── 页面底色：由 token 驱动，@layer base 让组件层可覆盖 ── */
@layer base {
  html, body {
    background: var(--surface);
  }
}