/**
 * 拾光主题 · 设计 Token
 * 所有颜色、圆角、阴影、动效、间距的唯一来源
 * 修改设计时，只改这里
 */

:root{
  /* ============================================================
     颜色 · 浅色模式（默认）
     ============================================================ */

  /* 背景 */
  --sg-bg:              #f5f5f7;
  --sg-bg-elevated:     #ffffff;
  --sg-bg-sunken:       #eceef1;

  /* 文字 */
  --sg-text:            #1d1d1f;
  --sg-text-2:          #6e6e73;
  --sg-text-3:          #86868b;
  --sg-text-inverse:    #ffffff;

  /* 强调色 */
  --sg-accent:          #0a84ff;
  --sg-accent-2:        #5e5ce6;
  --sg-accent-soft:     rgba(10, 132, 255, .08);
  --sg-accent-line:     rgba(10, 132, 255, .15);

  /* 品牌渐变 */
  --sg-brand:           linear-gradient(135deg, #3b5bfd 0%, #6a5af9 60%, #8b5cf6 100%);
  --sg-brand-solid:     #4f5cf7;

  /* 语义色 */
  --sg-success:         #30d158;
  --sg-warning:         #ff9f0a;
  --sg-danger:          #ff3b30;
  --sg-neutral:         #8e8e93;

  /* 分隔线 */
  --sg-line:            rgba(0, 0, 0, .055);
  --sg-line-strong:     rgba(0, 0, 0, .1);

  /* ============================================================
     毛玻璃
     ============================================================ */

  --sg-glass-bg:        rgba(255, 255, 255, .68);
  --sg-glass-bg-strong: rgba(255, 255, 255, .85);
  --sg-glass-border:    rgba(255, 255, 255, .85);
  --sg-glass-border-2:  rgba(255, 255, 255, .95);
  --sg-glass-highlight: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9), transparent);

  /* ============================================================
     阴影
     ============================================================ */

  --sg-shadow-xs:       0 1px 2px rgba(0, 0, 0, .03);
  --sg-shadow-sm:       0 1px 3px rgba(0, 0, 0, .03), 0 6px 18px rgba(0, 0, 0, .04);
  --sg-shadow-md:       0 2px 6px rgba(0, 0, 0, .04), 0 14px 36px rgba(0, 0, 0, .07);
  --sg-shadow-lg:       0 4px 10px rgba(0, 0, 0, .05), 0 24px 56px rgba(0, 0, 0, .1);
  --sg-shadow-xl:       0 8px 20px rgba(0, 0, 0, .08), 0 30px 70px rgba(0, 0, 0, .18);
  --sg-shadow-brand:    0 10px 32px rgba(59, 91, 253, .28);
  --sg-shadow-brand-sm: 0 6px 18px rgba(59, 91, 253, .24);

  /* ============================================================
     圆角
     ============================================================ */

  --sg-r-xs:            6px;
  --sg-r-sm:            10px;
  --sg-r-md:            16px;
  --sg-r-lg:            22px;
  --sg-r-xl:            30px;
  --sg-r-pill:          100px;
  --sg-r-circle:        50%;

  /* ============================================================
     间距
     ============================================================ */

  --sg-sp-1:            4px;
  --sg-sp-2:            8px;
  --sg-sp-3:            12px;
  --sg-sp-4:            16px;
  --sg-sp-5:            20px;
  --sg-sp-6:            24px;
  --sg-sp-8:            32px;
  --sg-sp-10:           40px;
  --sg-sp-12:           48px;
  --sg-sp-16:           64px;
  --sg-sp-20:           80px;
  --sg-sp-24:           96px;

  /* ============================================================
     布局
     ============================================================ */

  --sg-container:       1280px;
  --sg-container-narrow:720px;
  --sg-nav-h:           58px;
  --sg-nav-h-mobile:    44px;
  --sg-bottom-nav-h:    64px;

  /* ============================================================
     字体
     ============================================================ */

  --sg-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
             "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
             "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sg-font-mono: "SF Mono", "JetBrains Mono", Menlo, Consolas,
                  "Liberation Mono", monospace;

  --sg-fs-xs:           11px;
  --sg-fs-sm:           12.5px;
  --sg-fs-base:         14px;
  --sg-fs-md:           15px;
  --sg-fs-lg:           17px;
  --sg-fs-xl:           20px;
  --sg-fs-2xl:          24px;
  --sg-fs-3xl:          30px;
  --sg-fs-4xl:          42px;
  --sg-fs-5xl:          52px;

  --sg-lh-tight:        1.15;
  --sg-lh-snug:         1.4;
  --sg-lh-normal:       1.5;
  --sg-lh-relaxed:      1.7;

  /* ============================================================
     动效
     ============================================================ */

  --sg-ease:            cubic-bezier(.32, .72, 0, 1);
  --sg-ease-in-out:     cubic-bezier(.4, 0, .2, 1);
  --sg-dur-fast:        .2s;
  --sg-dur-base:        .3s;
  --sg-dur-slow:        .4s;
  --sg-dur-slower:      .5s;

  /* ============================================================
     层级
     ============================================================ */

  --sg-z-bg:            -1;
  --sg-z-base:          1;
  --sg-z-toolbar:       20;
  --sg-z-dropdown:      100;
  --sg-z-nav:           100;
  --sg-z-sticky:        150;
  --sg-z-modal:         300;
  --sg-z-toast:         1000;
  
    /* ============================================================
     兼容别名（对接现有 mobile.css 等旧文件）
     ============================================================ */

  --sg-text-primary:    var(--sg-text);
  --sg-text-secondary:  var(--sg-text-2);
  --sg-text-muted:      var(--sg-text-3);
  --sg-primary:         var(--sg-accent);
  --sg-primary-light:   var(--sg-accent-2);
}

/* ============================================================
   暗色模式 · 占位（第二阶段填充）
   现在只做变量挂钩，不影响浅色
   ============================================================ */

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    /* 第二阶段填充 */
  }
}

[data-theme="dark"]{
  /* 第二阶段填充 */
}