/* =====================================================================
 * Sello Design Tokens v3.0 — 嘉欣完整规范
 *
 * 从三页 auth 提取 + 全量补全色阶/间距栅格/阴影层级/断点/z-index
 * 统一 --sello-* 前缀。改一处全局生效。
 *
 * 命名框架（按层级）:
 *   color-{group}[-{variant}]  色彩：primary/error/success/warning/border/bg/text
 *   space-{scale}               间距：2xs/3xs/xs/sm/md/lg/xl/2xl/3xl
 *   radius-{scale}              圆角：sm/md/lg/full
 *   shadow-{level}              阴影：sm/md/lg/xl/focus
 *   font-size-{scale}           字号：xs/sm/base/lg/xl/2xl/3xl
 *   breakpoint-{size}           断点：sm/md/lg/xl
 *   z-{layer}                   层叠：base/dropdown/toast/modal/tooltip
 *   transition-{speed}          过渡：fast/base/slow
 * ===================================================================== */

:root {
  /* =================================================================
   * 色彩（暗色主题基准）
   *
   * 色阶规范：
   *   -50  ~ -100 : 极淡背景（hover/pressed 的叠加层）
   *   -200 ~ -400 : 浅色填充（tag、badge 背景）
   *   -500 ~ -600 : 主色（按钮、链接、强调文字）
   *   -700 ~ -900 : 深色变体（边框加深、文字加深）
   *
   * 当前 auth 场景只用各色的单值和 soft 变体；完整色阶预留给
   * 看板、信息卡、listing 编辑器等后续功能页。
   * ================================================================= */

  /* --- 主色调（靛蓝系） --- */
  --sello-color-primary-50:   rgba(99, 102, 241, 0.04);
  --sello-color-primary-100:  rgba(99, 102, 241, 0.08);
  --sello-color-primary-200:  rgba(99, 102, 241, 0.15);
  --sello-color-primary-300:  rgba(129, 140, 248, 0.30);
  --sello-color-primary-400:  rgba(129, 140, 248, 0.50);
  --sello-color-primary:      #818cf8;
  --sello-color-primary-600:  #6366f1;
  --sello-color-primary-700:  #4f46e5;
  --sello-color-primary-800:  rgba(79, 70, 229, 0.60);
  --sello-color-primary-900:  rgba(79, 70, 229, 0.30);

  /* 兼容别名 */
  --sello-color-primary-hover: var(--sello-color-primary-300);
  --sello-color-primary-soft:  var(--sello-color-primary-100);

  /* --- 强调色（青蓝系） --- */
  --sello-color-accent: #06b6d4;

  /* --- 错误色（红色系） --- */
  --sello-color-error-50:     rgba(239, 68, 68, 0.04);
  --sello-color-error-100:    rgba(239, 68, 68, 0.08);
  --sello-color-error-200:    rgba(239, 68, 68, 0.15);
  --sello-color-error:        #ef4444;
  --sello-color-error-600:    #dc2626;

  /* 兼容别名 */
  --sello-color-error-soft:   var(--sello-color-error-100);
  --sello-color-error-border: var(--sello-color-error-200);

  /* --- 成功色（绿色系） --- */
  --sello-color-success-50:   rgba(34, 197, 94, 0.04);
  --sello-color-success-100:  rgba(34, 197, 94, 0.08);
  --sello-color-success-200:  rgba(34, 197, 94, 0.15);
  --sello-color-success:      #22c55e;
  --sello-color-success-600:  #16a34a;

  /* 兼容别名 */
  --sello-color-success-soft:  var(--sello-color-success-100);
  --sello-color-success-border: var(--sello-color-success-200);

  /* --- 警告色（琥珀系） --- */
  --sello-color-warning-50:   rgba(245, 158, 11, 0.04);
  --sello-color-warning-100:  rgba(245, 158, 11, 0.08);
  --sello-color-warning:      #f59e0b;

  /* --- 边框 --- */
  --sello-color-border:         rgba(255, 255, 255, 0.14);
  --sello-color-border-hover:   rgba(255, 255, 255, 0.15);
  --sello-color-border-focus:   rgba(129, 140, 248, 0.12);
  --sello-color-border-strong:  rgba(255, 255, 255, 0.20);

  /* --- 背景 --- */
  --sello-color-bg:             #020208;
  --sello-color-bg-card:        rgba(255, 255, 255, 0.028);
  --sello-color-bg-input:       rgba(255, 255, 255, 0.05);
  --sello-color-bg-tab:         rgba(255, 255, 255, 0.02);
  --sello-color-bg-hover:       rgba(255, 255, 255, 0.04);

  /* --- 毛玻璃背景（auth 语言选择器、下拉面板等覆盖层） --- */
  --sello-color-bg-glass:       rgba(15, 23, 42, 0.85);
  --sello-color-bg-glass-heavy: rgba(15, 23, 42, 0.95);

  /* --- 强度指示条底色 --- */
  --sello-color-strength-track: rgba(255, 255, 255, 0.04);

  /* --- 文字 --- */
  --sello-color-text-primary:   #e8e8ed;
  --sello-color-text-secondary: rgba(232, 232, 237, 0.55);
  --sello-color-text-disabled:  rgba(232, 232, 237, 0.35);
  --sello-color-text-muted:     rgba(232, 232, 237, 0.45);

  /* =================================================================
   * 间距栅格（4px 基准）
   * 2xs=2px, 3xs=1px（微调用）仅在必要时使用
   * ================================================================= */
  --sello-space-3xs:  1px;
  --sello-space-2xs:  2px;
  --sello-space-xs:   4px;
  --sello-space-sm:   8px;
  --sello-space-md:   16px;
  --sello-space-lg:   24px;
  --sello-space-xl:   32px;
  --sello-space-2xl:  40px;
  --sello-space-3xl:  48px;

  /* =================================================================
   * 圆角
   * ================================================================= */
  --sello-radius-sm:   6px;
  --sello-radius-md:   10px;
  --sello-radius-lg:   16px;
  --sello-radius-full: 9999px;

  /* =================================================================
   * 阴影层级
   * sm: 悬浮卡片（按钮 hover、下拉菜单）
   * md: auth card、模态弹窗
   * lg: 全屏抽屉、侧边栏
   * xl: 极少使用——全局遮罩层
   * focus: 输入框聚焦光环
   * ================================================================= */
  --sello-shadow-sm:    0 4px 12px rgba(0, 0, 0, 0.15);
  --sello-shadow-md:    0 8px 32px rgba(0, 0, 0, 0.30);
  --sello-shadow-lg:    0 16px 48px rgba(0, 0, 0, 0.40);
  --sello-shadow-xl:    0 24px 64px rgba(0, 0, 0, 0.50);
  --sello-shadow-focus: 0 0 0 3px rgba(129, 140, 248, 0.06);

  /* =================================================================
   * 字体大小
   * ================================================================= */
  --sello-font-size-xs:   10px;
  --sello-font-size-sm:   11px;
  --sello-font-size-base: 13px;
  --sello-font-size-lg:   14px;
  --sello-font-size-xl:   20px;
  --sello-font-size-2xl:  22px;
  --sello-font-size-3xl:  28px;

  /* =================================================================
   * 字体族
   * ================================================================= */
  --sello-font-brand:   'Bruno Ace SC', 'Arial Black', sans-serif;
  --sello-font-heading: 'Space Grotesk', sans-serif;
  --sello-font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --sello-font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  /* =================================================================
   * 断点（移动优先）
   * sm: 手机横屏 / 小平板    ≥ 480px
   * md: 平板                  ≥ 768px
   * lg: 笔记本 / 小桌面       ≥ 1024px
   * xl: 宽屏                  ≥ 1280px
   * ================================================================= */
  --sello-breakpoint-sm: 480px;
  --sello-breakpoint-md: 768px;
  --sello-breakpoint-lg: 1024px;
  --sello-breakpoint-xl: 1280px;

  /* =================================================================
   * z-index 层叠
   * ================================================================= */
  --sello-z-base:      0;
  --sello-z-content:   1;
  --sello-z-dropdown:  100;
  --sello-z-sticky:    200;
  --sello-z-toast:     500;
  --sello-z-modal:     1000;
  --sello-z-tooltip:   1100;

  /* =================================================================
   * 过渡
   * ================================================================= */
  --sello-transition-fast: 0.15s ease;
  --sello-transition:      0.2s ease;
  --sello-transition-slow: 0.3s ease;

  /* =================================================================
   * 其他
   * ================================================================= */
  --sello-blur: 16px;

  /* =================================================================
   * 功能页最大宽度
   * ================================================================= */
  --sello-max-width-auth:   400px;
  --sello-max-width-page:   1200px;
  --sello-max-width-content: 720px;
}