/*
 * =============================================
 *   StarmoAI 全局设计规范 · CSS Token 配置
 *   版本: v1.0 | 日期: 2026.07.23
 * =============================================
 *
 * 本文件为项目唯一基础参数源，所有样式模块通过
 * CSS 变量读取本文件定义的 token，禁止硬编码。
 *
 * 修改说明:
 *   - 仅在此文件中调整数值即可全局生效
 *   - 新增变量需遵循命名规范: --sm-[模块]-[属性]
 *   - 变量分组: Colors / Spacing / Typography / Shadow / Radius / Animation / Breakpoint / ZIndex
 */

:root {

  /* =====================================================
   *  1. 色彩系统 (Colors)
   *  命名规范: --sm-color-[功能]-[状态/深浅]
   * ===================================================== */

  /* --- 品牌色 (Brand) --- */
  --sm-color-brand-primary:   #a78bfa;   /* 主品牌紫 */
  --sm-color-brand-secondary: #818cf8;   /* 次品牌靛蓝 */
  --sm-color-brand-accent:    #67e8f9;   /* 点缀青 */
  --sm-color-brand-light:     #c4b5fd;   /* 浅紫 */
  --sm-color-brand-dark:      #6d28d9;   /* 深紫 */

  /* --- 中性色 (Neutral) --- */
  --sm-color-neutral-0:   #ffffff;
  --sm-color-neutral-50:  #f8f7ff;
  --sm-color-neutral-100: #e8e5f5;
  --sm-color-neutral-200: #c4bdd8;
  --sm-color-neutral-300: #9e93b8;
  --sm-color-neutral-400: #7a6d99;
  --sm-color-neutral-500: #5a4d78;
  --sm-color-neutral-600: #3e3358;
  --sm-color-neutral-700: #2a2040;
  --sm-color-neutral-800: #18122b;
  --sm-color-neutral-900: #0c0818;
  --sm-color-neutral-950: #000008;  /* 首页深空背景 */

  /* --- 语义色 (Semantic) --- */
  --sm-color-text-primary:   rgba(196, 181, 253, 0.85);
  --sm-color-text-secondary: rgba(167, 139, 250, 0.6);
  --sm-color-text-muted:     rgba(167, 139, 250, 0.35);
  --sm-color-text-ghost:     rgba(167, 139, 250, 0.15);

  --sm-color-bg-base:        var(--sm-color-neutral-950);
  --sm-color-bg-overlay:     rgba(12, 8, 24, 0.7);
  --sm-color-bg-card:        rgba(88, 28, 135, 0.15);

  /* --- 星空专用色 (Starfield) --- */
  --sm-color-star-white:     rgb(255, 255, 255);
  --sm-color-star-bluewhite: rgb(200, 220, 255);
  --sm-color-star-warmwhite: rgb(255, 240, 220);
  --sm-color-star-lightblue: rgb(180, 200, 255);
  --sm-color-star-lightorange: rgb(255, 220, 180);
  --sm-color-star-lightpurple: rgb(220, 200, 255);

  /* --- 星云色 (Nebula) --- */
  --sm-color-nebula-purple:  rgba(88, 28, 135, 0.15);
  --sm-color-nebula-blue:    rgba(15, 82, 186, 0.12);
  --sm-color-nebula-violet:  rgba(139, 92, 246, 0.1);
  --sm-color-nebula-cyan:    rgba(6, 182, 212, 0.08);


  /* =====================================================
   *  2. 间距系统 (Spacing)
   *  基于 4px 网格，命名: --sm-space-[层级]
   * ===================================================== */
  --sm-space-0:   0;
  --sm-space-1:   4px;
  --sm-space-2:   8px;
  --sm-space-3:   12px;
  --sm-space-4:   16px;
  --sm-space-5:   20px;
  --sm-space-6:   24px;
  --sm-space-8:   32px;
  --sm-space-10:  40px;
  --sm-space-12:  48px;
  --sm-space-16:  64px;
  --sm-space-20:  80px;
  --sm-space-24:  96px;
  --sm-space-32:  128px;


  /* =====================================================
   *  3. 圆角系统 (Radius)
   * ===================================================== */
  --sm-radius-none: 0;
  --sm-radius-sm:   4px;
  --sm-radius-md:   8px;
  --sm-radius-lg:   12px;
  --sm-radius-xl:   16px;
  --sm-radius-2xl:  24px;
  --sm-radius-full: 9999px;


  /* =====================================================
   *  4. 阴影系统 (Shadow)
   * ===================================================== */
  --sm-shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.3);
  --sm-shadow-md:   0 4px 6px rgba(0, 0, 0, 0.4);
  --sm-shadow-lg:   0 10px 15px rgba(0, 0, 0, 0.5);
  --sm-shadow-glow-sm: 0 0 10px rgba(167, 139, 250, 0.2);
  --sm-shadow-glow-md: 0 0 20px rgba(167, 139, 250, 0.3);
  --sm-shadow-glow-lg: 0 0 40px rgba(167, 139, 250, 0.4);


  /* =====================================================
   *  5. 动画时长与缓动 (Animation)
   * ===================================================== */
  --sm-duration-instant: 100ms;
  --sm-duration-fast:    200ms;
  --sm-duration-normal:  300ms;
  --sm-duration-slow:    500ms;
  --sm-duration-slower:  800ms;
  --sm-duration-slowest: 1200ms;

  --sm-ease-linear:      linear;
  --sm-ease-in:          cubic-bezier(0.4, 0, 1, 1);
  --sm-ease-out:         cubic-bezier(0, 0, 0.2, 1);
  --sm-ease-in-out:      cubic-bezier(0.4, 0, 0.2, 1);
  --sm-ease-bounce:      cubic-bezier(0.34, 1.56, 0.64, 1);
  --sm-ease-smooth:      cubic-bezier(0.25, 0.1, 0.25, 1);


  /* =====================================================
   *  6. 响应式断点 (Breakpoints)
   *  仅作变量记录，实际媒体查询仍需手写数值
   * ===================================================== */
  --sm-breakpoint-xs:  480px;
  --sm-breakpoint-sm:  768px;
  --sm-breakpoint-md:  1024px;
  --sm-breakpoint-lg:  1280px;
  --sm-breakpoint-xl:  1440px;


  /* =====================================================
   *  7. Z-Index 层级
   * ===================================================== */
  --sm-z-base:     0;
  --sm-z-canvas:   1;
  --sm-z-cursor:   2;
  --sm-z-content:  10;
  --sm-z-overlay:  50;
  --sm-z-modal:    100;
  --sm-z-tooltip:  200;


  /* =====================================================
   *  8. 布局参数
   * ===================================================== */
  --sm-container-max: 1200px;
  --sm-container-padding: var(--sm-space-6);
  --sm-grid-columns: 12;
  --sm-grid-gap: var(--sm-space-4);


  /* =====================================================
   *  9. 星空 Canvas 参数（CSS 中定义，JS 通过读取同步）
   * ===================================================== */
  --sm-star-far-density:    3000;   /* 每像素多少颗远星 */
  --sm-star-mid-density:    8000;
  --sm-star-near-density:   20000;
  --sm-star-twinkle-speed:  0.5;
  --sm-star-drift-speed:    0.002;
  --sm-meteor-interval-min: 2000;   /* ms */
  --sm-meteor-interval-max: 7000;   /* ms */
  --sm-meteor-speed-min:    6;
  --sm-meteor-speed-max:    16;


  /* =====================================================
   *  10. 首页专用参数
   * ===================================================== */
  --sm-home-nebula-blur: 120px;
  --sm-home-nebula-fade-duration: 6s;
  --sm-home-brand-reveal-delay: 1.5s;
  --sm-home-brand-reveal-duration: 3s;
  --sm-home-hint-float-duration: 3s;
  --sm-home-hint-fade-delay: 4s;
  --sm-home-gradient-shift-duration: 8s;
  --sm-home-cursor-glow-size: 200px;

}