/* ========================================================================
   Sello Design System v1.3
   基于 sello-saas-ui-designer 技能规范，从现存 10 个 CSS 文件提炼统一设计语言
   覆盖：颜色全色阶 / 字体 type scale / 4px 栅格间距 / 组件 token / 暗色模式

   v1.1 变更（2026-07-24）：
   - Type scale 收敛：合并 12/13/11px 三个仅差1px的字号 → 统一基准12px
     body-sm: 13→12, caption-sm: 11→12（语义分层保留，值暂同，待 modular scale 阶段展开）
   - 间距：新增 --space-0\.5(2px) / --space-1\.5(6px) / --space-2\.5(10px)
   - 新增 Section 12：--sello-* 前缀代理层（零 breaking change 逐文件迁移）
   - Section 11 硬编码→Token 速查表

   v1.2 变更（2026-07-24 Phase 2）：
   - Type scale modular scale 展开：body-sm 12→13px, caption-sm 12→11px 正式分层
   - Shadow 语义发光：新增 --shadow-glow-{success,danger,info}
   - 暗色模式 semantic bg：8 个语义色背景值适配暗色背景
   - Section 12 sello-proxy 同步：新增 space/type/shadow 代理 token

   v1.3 变更（2026-07-24 Phase 3）：
   - 新增 Section 13：Glass Token 体系（6 个变量，亮/暗双模式）
     用于 listing 页 v4 的全域玻璃态视觉 —— hero 卡片、最近结果、功能卡片
     暗色模式取值方向：Vercel 科技风，高透光率 + 低噪点光晕
     亮色模式取值方向：干净半透白，仅 border/blur/shadow 三层下 subtle 化
   ======================================================================== */

/* ==========================================================================
   SECTION 1: 颜色系统 (Color Palette)
   三层：Primary 品牌色 + Semantic 语义色 + Neutral 中性灰
   ========================================================================== */
:root {
  /* ---- 1a. Primary 品牌色（靛蓝 → 青色渐变体系） ---- */
  --color-primary-50:  #eef2ff;
  --color-primary-100: #e0e7ff;
  --color-primary-200: #c7d2fe;
  --color-primary-300: #a5b4fc;
  --color-primary-400: #818cf8;
  --color-primary-500: #6366f1;
  --color-primary-600: #4f46e5;
  --color-primary-700: #4338ca;
  --color-primary-800: #3730a3;
  --color-primary-900: #312e81;
  --color-accent-start: #1e40af;
  --color-accent-end:   #06b6d4;

  /* ---- 1b. Semantic 语义色 ---- */
  /* Success 成功（绿） */
  --color-success-50:  #f0fdf4;
  --color-success-100: #dcfce7;
  --color-success-200: #bbf7d0;
  --color-success-400: #4ade80;
  --color-success-500: #22c55e;
  --color-success-600: #16a34a;
  --color-success-700: #15803d;
  --color-success-900: #14532d;

  /* Warning 警告（琥珀） */
  --color-warning-50:  #fffbeb;
  --color-warning-100: #fef3c7;
  --color-warning-200: #fde68a;
  --color-warning-400: #fbbf24;
  --color-warning-500: #f59e0b;
  --color-warning-600: #d97706;
  --color-warning-700: #b45309;
  --color-warning-900: #78350f;

  /* Danger 危险（红） */
  --color-danger-50:  #fef2f2;
  --color-danger-100: #fee2e2;
  --color-danger-200: #fecaca;
  --color-danger-400: #f87171;
  --color-danger-500: #ef4444;
  --color-danger-600: #dc2626;
  --color-danger-700: #b91c1c;
  --color-danger-900: #7f1d1d;

  /* Info 信息（天蓝） */
  --color-info-50:  #f0f9ff;
  --color-info-100: #e0f2fe;
  --color-info-200: #bae6fd;
  --color-info-400: #38bdf8;
  --color-info-500: #0ea5e9;
  --color-info-600: #0284c7;
  --color-info-700: #0369a1;
  --color-info-900: #0c4a6e;

  /* ---- 1c. Neutral 中性灰 ---- */
  --color-neutral-0:   #ffffff;
  --color-neutral-50:  #f8fafc;
  --color-neutral-100: #f1f5f9;
  --color-neutral-200: #e2e8f0;
  --color-neutral-300: #cbd5e1;
  --color-neutral-400: #94a3b8;
  --color-neutral-500: #64748b;
  --color-neutral-600: #475569;
  --color-neutral-700: #334155;
  --color-neutral-800: #1e293b;
  --color-neutral-900: #0f172a;
}

/* ==========================================================================
   SECTION 2: 语义化颜色别名 (Semantic Aliases)
   让「用在哪」比「是什么色」更直观
   ========================================================================== */
:root {
  --color-bg-page:         var(--color-neutral-50);
  --color-bg-surface:      var(--color-neutral-0);
  --color-bg-surface-hover: var(--color-neutral-100);
  --color-bg-muted:        var(--color-neutral-100);
  --color-bg-brand-soft:   var(--color-primary-50);

  --color-border:          var(--color-neutral-200);
  --color-border-hover:    var(--color-primary-400);
  --color-border-focus:    var(--color-primary-500);
  --color-border-light:    var(--color-neutral-100);

  --color-text-primary:    var(--color-neutral-800);
  --color-text-secondary:  var(--color-neutral-500);
  --color-text-muted:      var(--color-neutral-400);
  --color-text-inverse:    var(--color-neutral-0);
  --color-text-link:       var(--color-primary-600);
  --color-text-link-hover: var(--color-primary-700);

  --color-accent-gradient: linear-gradient(135deg, var(--color-accent-start), var(--color-accent-end));
}

/* ==========================================================================
   SECTION 3: 字体 Type Scale（4 档 × 5 级）
   档位：brand / heading / body / caption
   级数：xs - sm - md - lg - xl（每档至少 3 级可用）
   ========================================================================== */
:root {
  /* ---- 字体族 ---- */
  --font-brand:   'Bruno Ace SC', sans-serif;
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* ---- Brand 档（Bruno Ace SC）：Logo / 加载动画 / Slogan ---- */
  /* v1.1 modular scale: 8→11→20→28→72 (ratio ~1.25~1.4) */
  --text-brand-xl:  72px;
  --text-brand-lg:  28px;
  --text-brand-md:  20px;
  --text-brand-sm:  11px;
  --text-brand-xs:  8px;

  /* ---- Heading 档（Space Grotesk）：页面标题 / 卡片标题 / 数字 ---- */
  /* v1.1 modular scale: 13→15→20→24→28 (ratio ~1.15~1.2) */
  --text-heading-xl: 28px;
  --text-heading-lg: 24px;
  --text-heading-md: 20px;
  --text-heading-sm: 15px;
  --text-heading-xs: 13px;

  /* ---- Body 档（Inter）：正文 / 表单 / 按钮 ---- */
  /* v1.2 modular scale 展开：body-sm 12→13px，与 body-xs(12px) 形成真实层级差。
     当前 16/14/13/12 四级，ratio ~1.08~1.14。v1.1 临时合并的语义分层正式独立。 */
  --text-body-lg: 16px;
  --text-body-md: 14px;
  --text-body-sm: 13px;
  --text-body-xs: 12px;

  /* ---- Caption 档（Inter）：辅助说明 / 标签 / 页码 ---- */
  /* v1.2 modular scale 展开：caption-sm 12→11px，与 caption-md(12px) 形成真实层级差。
     当前 12/11/10 三级，ratio ~1.09~1.1。v1.1 临时合并的语义分层正式独立。
     注：此前注释提到 caption-sm→10px，但 12→10 跃迁过大，视觉跳跃明显，
     改为 12→11 作为最终值，caption-xs 保留 10px 作为最小可读尺寸。 */
  --text-caption-md: 12px;
  --text-caption-sm: 11px;
  --text-caption-xs: 10px;

  /* ---- 字重 ---- */
  --weight-light:  400;
  --weight-normal: 500;
  --weight-semibold: 600;
  --weight-bold:   700;

  /* ---- 行高 ---- */
  --leading-tight:  1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;
}

/* ==========================================================================
   SECTION 4: 间距栅格 (4px Grid Spacing)
   基准 4px，步进 ×1 ×2 ×3 ×4 ×5 ×6 ×8 ×10 ×12 ×16
   v1.1 新增：--space-1\.5 (6px) / --space-2\.5 (10px)
   解决紧凑型组件（badge/tag/small-button）在 4px 和 8px 之间的粒度需求
   ========================================================================== */
:root {
  --space-0:  0;
  --space-0\.5: 2px;   /* v1.1 */
  --space-1:  4px;
  --space-1\.5: 6px;   /* v1.1：紧凑型组件合法扩展 */
  --space-2:  8px;
  --space-2\.5: 10px;  /* v1.1：4px栅格natural friction point的合法表达 */
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
}

/* ==========================================================================
   SECTION 5: 圆角 (Border Radius) — 继承原有三层 + 扩展
   ========================================================================== */
:root {
  --radius-none: 0;
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-full: 9999px;
}

/* ==========================================================================
   SECTION 6: 阴影层级 (Shadow Elevation)
   v1.2 新增：--shadow-glow-success / --shadow-glow-danger / --shadow-glow-info
   语义发光 token 用于状态反馈（成功/危险/信息高亮）
   ========================================================================== */
:root {
  --shadow-none:  none;
  --shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg:    0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-xl:    0 12px 32px rgba(0, 0, 0, 0.10);
  --shadow-glow-primary: 0 4px 12px rgba(30, 64, 175, 0.25);
  --shadow-glow-success: 0 4px 12px rgba(34, 197, 94, 0.25);
  --shadow-glow-danger:  0 4px 12px rgba(239, 68, 68, 0.25);
  --shadow-glow-info:    0 4px 12px rgba(14, 165, 233, 0.25);
}

/* ==========================================================================
   SECTION 7: 过渡与动画 (Transitions)
   ========================================================================== */
:root {
  --transition-fast:    150ms ease;
  --transition-normal:  200ms ease;
  --transition-slow:    300ms ease;
  --transition-page:    400ms ease;
  --transition-loading: 500ms ease;
}

/* ==========================================================================
   SECTION 8: 布局常量 (Layout Tokens)
   ========================================================================== */
:root {
  --layout-sidebar-width:  240px;
  --layout-header-height:  56px;
  --layout-content-max:    1200px;
  --layout-page-padding-x: 32px;
  --layout-page-padding-y: 28px;
}

/* ==========================================================================
   SECTION 9: 旧变量兼容映射 (Legacy Alias)
   保证现有 CSS 文件不改也能用新 token
   ========================================================================== */
:root {
  --primary-50:    var(--color-primary-50);
  --primary-100:   var(--color-primary-100);
  --primary-200:   var(--color-primary-200);
  --primary-400:   var(--color-primary-400);
  --primary-500:   var(--color-primary-500);
  --primary-600:   var(--color-primary-600);
  --primary-700:   var(--color-primary-700);
  --primary-900:   var(--color-primary-900);
  --accent-start:  var(--color-accent-start);
  --accent-end:    var(--color-accent-end);
  --bg:            var(--color-bg-page);
  --surface:       var(--color-bg-surface);
  --border:        var(--color-border);
  --text-primary:  var(--color-text-primary);
  --text-secondary: var(--color-text-secondary);
  --text-muted:    var(--color-text-muted);
  --text-dim:      var(--color-neutral-400);
  --text-sec:      var(--color-text-secondary);
  --radius-sm:     var(--radius-sm);
  --radius-md:     var(--radius-md);
  --radius-lg:     var(--radius-lg);
  --sidebar-width: var(--layout-sidebar-width);
  --header-height: var(--layout-header-height);
  --shadow-card:   var(--shadow-xs);
  --shadow-lift:   var(--shadow-md);
}

/* ==========================================================================
   SECTION 10: Glass Token v1.3（玻璃态设计令牌）
   7 个 token 覆盖玻璃容器的五层视觉 + 增强档位：
     --glass-bg           背景色（半透底）
     --glass-border       边框（微白或微暗描边）
     --glass-blur         模糊度（backdrop-filter blur 的 px 值，标准档）
     --glass-blur-strong  模糊度增强档（hero 区等视觉重心专用，暗色 24px）
     --glass-shadow       容器投影
     --glass-highlight    表面高光（顶部微亮）
     --glass-text         前景文本色（保 contrast）
   亮/暗双模式，暗色指向 Vercel 科技风方向。
   ========================================================================== */
:root {
  --glass-bg:        rgba(255, 255, 255, 0.70);
  --glass-border:    rgba(226, 232, 240, 0.60);
  --glass-blur:        12px;
  --glass-blur-strong: 18px;
  --glass-shadow:    0 4px 24px rgba(0, 0, 0, 0.06);
  --glass-highlight: rgba(255, 255, 255, 0.40);
  --glass-text:      var(--color-text-primary);
}

/* ==========================================================================
   SECTION 11: 暗色模式 (Dark Mode)
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg-page:         #0f172a;
    --color-bg-surface:      #1e293b;
    --color-bg-surface-hover: #334155;
    --color-bg-muted:        #1e293b;
    --color-bg-brand-soft:   #1e1b4b;

    --color-border:          #334155;
    --color-border-hover:    var(--color-primary-400);
    --color-border-focus:    var(--color-primary-500);
    --color-border-light:    #1e293b;

    --color-text-primary:    #f1f5f9;
    --color-text-secondary:  #94a3b8;
    --color-text-muted:      #64748b;
    --color-text-inverse:    #0f172a;
    --color-text-link:       #818cf8;
    --color-text-link-hover: #a5b4fc;

    --color-neutral-0:       #1e293b;
    --color-neutral-50:      #0f172a;
    --color-neutral-100:     #1e293b;
    --color-neutral-200:     #334155;
    --color-neutral-300:     #475569;

    /* ---- v1.2 暗色语义色背景（semantic bg on dark bg） ---- */
    --color-success-50:  #022c22;
    --color-success-100: #064e3b;
    --color-warning-50:  #422006;
    --color-warning-100: #713f12;
    --color-danger-50:   #450a0a;
    --color-danger-100:  #7f1d1d;
    --color-info-50:     #082f49;
    --color-info-100:    #0c4a6e;

    --shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.20);
    --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.25);
    --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.30);
    --shadow-lg:   0 8px 24px rgba(0, 0, 0, 0.35);
    --shadow-xl:   0 12px 32px rgba(0, 0, 0, 0.40);
    --shadow-glow-primary: 0 4px 16px rgba(99, 102, 241, 0.30);
    --shadow-glow-success: 0 4px 16px rgba(34, 197, 94, 0.30);
    --shadow-glow-danger:  0 4px 16px rgba(239, 68, 68, 0.30);
    --shadow-glow-info:    0 4px 16px rgba(14, 165, 233, 0.30);

    /* ---- v1.3 暗色 Glass Token ---- */
    --glass-bg:        rgba(15, 23, 42, 0.60);
    --glass-border:    rgba(255, 255, 255, 0.08);
    --glass-blur:        16px;
    --glass-blur-strong: 24px;
    --glass-shadow:    0 4px 24px rgba(0, 0, 0, 0.40);
    --glass-highlight: rgba(255, 255, 255, 0.05);
    --glass-text:      #f1f5f9;

    color-scheme: dark;
  }
}

/* ==========================================================================
   SECTION 12: 硬编码颜色 → Token 迁移速查表
   用于逐步消除 10 个 CSS 文件中的裸色值
   ========================================================================== */
/*
   #ffffff        → var(--color-bg-surface) 或 var(--color-neutral-0)
   #f8fafc        → var(--color-bg-page)
   #f1f5f9        → var(--color-bg-muted)
   #e2e8f0        → var(--color-neutral-200)
   #cbd5e1        → var(--color-neutral-300)
   #94a3b8        → var(--color-text-muted)
   #64748b        → var(--color-text-secondary)
   #1e293b        → var(--color-text-primary)
   #f3f4f6        → var(--color-neutral-100)
   #e5e7eb        → var(--color-neutral-200)
   #999 / #666    → var(--color-text-muted) / var(--color-text-secondary)
   #dcfce7        → var(--color-success-100)
   #166534        → var(--color-success-700)
   #fef3c7        → var(--color-warning-100)
   #92400e        → var(--color-warning-700)
   #fef2f2        → var(--color-danger-50)
   #fee2e2        → var(--color-danger-100)
   #dc2626        → var(--color-danger-600)
   #ef4444        → var(--color-danger-500)
   #e11d48        → var(--color-danger-600)
   #fca5a5        → var(--color-danger-200)
   #fff7ed        → var(--color-warning-50)
   #c2410c        → var(--color-warning-700)
   #fed7aa        → var(--color-warning-200)
   #dbeafe        → var(--color-primary-100)
   #cffafe        → var(--color-info-100)
   #f0f9ff        → var(--color-info-50)
   #eff6ff        → var(--color-primary-50)
   #fafbfc        → var(--color-neutral-50)
   #e65100        → var(--color-warning-700)
   #10b981        → var(--color-success-500)
   #f59e0b        → var(--color-warning-500)
   #0ea5e9        → var(--color-info-500)
*/

/* ==========================================================================
   SECTION 13: v1.1 — sello-domain 前缀代理层 (Progressive Migration)
   v1.2 新增：--sello-space-{0.5,1.5,2.5} / --sello-text-body-xs / --sello-text-caption-xs
   v1.2 新增：--sello-shadow-{sm,lg,xl} / --sello-shadow-glow-{success,danger,info}
   v1.3 新增：--sello-glass-{bg,border,blur,shadow,highlight,text}（6 个 glass token 代理）
   策略：不改底层 token，在上层加语义别名。
   旧代码继续用 --color-* / --space-* / --text-*
   新代码使用 --sello-* 前缀，与 frontend-spec.md 的 --app-* 形成清晰的 domain 边界
   迁移可逐文件推进，零 breaking change
   ========================================================================== */
:root {
  /* ---- v1.1 颜色 domain 代理 ---- */
  --sello-color-primary-50:    var(--color-primary-50);
  --sello-color-primary-100:   var(--color-primary-100);
  --sello-color-primary-200:   var(--color-primary-200);
  --sello-color-primary-400:   var(--color-primary-400);
  --sello-color-primary-500:   var(--color-primary-500);
  --sello-color-primary-600:   var(--color-primary-600);
  --sello-color-primary-700:   var(--color-primary-700);
  --sello-color-primary-900:   var(--color-primary-900);

  --sello-color-success-50:    var(--color-success-50);
  --sello-color-success-100:   var(--color-success-100);
  --sello-color-success-500:   var(--color-success-500);
  --sello-color-success-600:   var(--color-success-600);
  --sello-color-success-700:   var(--color-success-700);

  --sello-color-warning-50:    var(--color-warning-50);
  --sello-color-warning-100:   var(--color-warning-100);
  --sello-color-warning-500:   var(--color-warning-500);
  --sello-color-warning-600:   var(--color-warning-600);
  --sello-color-warning-700:   var(--color-warning-700);

  --sello-color-danger-50:     var(--color-danger-50);
  --sello-color-danger-100:    var(--color-danger-100);
  --sello-color-danger-500:    var(--color-danger-500);
  --sello-color-danger-600:    var(--color-danger-600);

  --sello-color-info-50:       var(--color-info-50);
  --sello-color-info-100:      var(--color-info-100);
  --sello-color-info-600:      var(--color-info-600);

  --sello-color-neutral-0:     var(--color-neutral-0);
  --sello-color-neutral-50:    var(--color-neutral-50);
  --sello-color-neutral-100:   var(--color-neutral-100);
  --sello-color-neutral-200:   var(--color-neutral-200);
  --sello-color-neutral-300:   var(--color-neutral-300);
  --sello-color-neutral-400:   var(--color-neutral-400);
  --sello-color-neutral-500:   var(--color-neutral-500);
  --sello-color-neutral-800:   var(--color-neutral-800);

  /* Semantic aliases with sello-domain */
  --sello-color-bg-page:         var(--color-bg-page);
  --sello-color-bg-surface:      var(--color-bg-surface);
  --sello-color-bg-muted:        var(--color-bg-muted);
  --sello-color-bg-brand-soft:   var(--color-bg-brand-soft);
  --sello-color-border:          var(--color-border);
  --sello-color-border-hover:    var(--color-border-hover);
  --sello-color-text-primary:    var(--color-text-primary);
  --sello-color-text-secondary:  var(--color-text-secondary);
  --sello-color-text-muted:      var(--color-text-muted);
  --sello-color-text-inverse:    var(--color-text-inverse);

  /* ---- v1.2 间距 domain 代理（含 v1.1 紧凑型扩展） ---- */
  --sello-space-0\.5: var(--space-0\.5);
  --sello-space-1:   var(--space-1);
  --sello-space-1\.5: var(--space-1\.5);
  --sello-space-2:   var(--space-2);
  --sello-space-2\.5: var(--space-2\.5);
  --sello-space-3:   var(--space-3);
  --sello-space-4:   var(--space-4);
  --sello-space-5:   var(--space-5);
  --sello-space-6:   var(--space-6);
  --sello-space-8:   var(--space-8);

  /* ---- v1.1 字体 domain 代理 ---- */
  --sello-font-brand:   var(--font-brand);
  --sello-font-heading: var(--font-heading);
  --sello-font-body:    var(--font-body);

  --sello-text-heading-xl: var(--text-heading-xl);
  --sello-text-heading-lg: var(--text-heading-lg);
  --sello-text-heading-md: var(--text-heading-md);
  --sello-text-heading-sm: var(--text-heading-sm);
  --sello-text-body-lg:    var(--text-body-lg);
  --sello-text-body-md:    var(--text-body-md);
  --sello-text-body-sm:    var(--text-body-sm);
  --sello-text-body-xs:    var(--text-body-xs);
  --sello-text-caption-md: var(--text-caption-md);
  --sello-text-caption-sm: var(--text-caption-sm);
  --sello-text-caption-xs: var(--text-caption-xs);

  /* ---- v1.1 其他 domain 代理 ---- */
  --sello-radius-sm: var(--radius-sm);
  --sello-radius-md: var(--radius-md);
  --sello-radius-lg: var(--radius-lg);
  --sello-shadow-xs: var(--shadow-xs);
  --sello-shadow-sm: var(--shadow-sm);
  --sello-shadow-md: var(--shadow-md);
  --sello-shadow-lg: var(--shadow-lg);
  --sello-shadow-xl: var(--shadow-xl);
  --sello-shadow-glow-primary: var(--shadow-glow-primary);
  --sello-shadow-glow-success: var(--shadow-glow-success);
  --sello-shadow-glow-danger:  var(--shadow-glow-danger);
  --sello-shadow-glow-info:    var(--shadow-glow-info);

  /* ---- v1.3 Glass domain 代理 ---- */
  --sello-glass-bg:        var(--glass-bg);
  --sello-glass-border:    var(--glass-border);
  --sello-glass-blur:        var(--glass-blur);
  --sello-glass-blur-strong: var(--glass-blur-strong);
  --sello-glass-shadow:      var(--glass-shadow);
  --sello-glass-highlight: var(--glass-highlight);
  --sello-glass-text:      var(--glass-text);
}