/**
 * Lemon Design Tokens — C 端唯一设计规范
 * 基于 Storvia 设计体系 + Lemon 夜空主题
 * 改色 / 改尺寸请只改本文件
 *
 * 命名规则：--lemon-{类别}-{语义}-{变体}
 * 类别：bg / text / border / accent / status / glass / shadow / radius / sp / font / size / z / blur / opacity / transition
 */
:root {

  /* ═══════════════════════════════════════
     1. BRAND — 品牌紫 + alpha 阶梯
     ═══════════════════════════════════════ */
  --lemon-accent:           #9c5bfc;
  --lemon-accent-soft:      #b794f4;
  --lemon-accent-hover:     rgba(156, 91, 252, 0.80);
  --lemon-accent-rgb:       156, 91, 252;

  --lemon-accent-alpha05:   rgba(156, 91, 252, 0.05);
  --lemon-accent-alpha10:   rgba(156, 91, 252, 0.10);
  --lemon-accent-alpha15:   rgba(156, 91, 252, 0.15);
  --lemon-accent-alpha20:   rgba(156, 91, 252, 0.20);
  --lemon-accent-alpha30:   rgba(156, 91, 252, 0.30);
  --lemon-accent-alpha40:   rgba(156, 91, 252, 0.40);
  --lemon-accent-alpha50:   rgba(156, 91, 252, 0.50);
  --lemon-accent-alpha60:   rgba(156, 91, 252, 0.60);

  /* ═══════════════════════════════════════
     2. BACKGROUND — 夜空层级
     ═══════════════════════════════════════ */
  --lemon-bg-primary:       #15062b;
  --lemon-bg-secondary:     #1c0e33;
  --lemon-bg-tertiary:      #241540;
  --lemon-bg-elevated:      #2a1a4a;

  /* ═══════════════════════════════════════
     3. TEXT — 6 级白色透明度
     ═══════════════════════════════════════ */
  --lemon-text-primary:     rgba(255, 255, 255, 0.92);
  --lemon-text-primary-soft: rgba(255, 255, 255, 0.85);
  --lemon-text-secondary:   rgba(255, 255, 255, 0.68);
  --lemon-text-tertiary:    rgba(255, 255, 255, 0.50);
  --lemon-text-quaternary:  rgba(255, 255, 255, 0.42);
  --lemon-text-disabled:    rgba(255, 255, 255, 0.24);
  --lemon-text-inverse:     #15062b;

  /* ═══════════════════════════════════════
     4. BORDER
     ═══════════════════════════════════════ */
  --lemon-border:           rgba(255, 255, 255, 0.10);
  --lemon-border-hover:     rgba(255, 255, 255, 0.20);
  --lemon-border-accent:    rgba(156, 91, 252, 0.35);

  /* ═══════════════════════════════════════
     5. STATUS — 功能色 + alpha 变体
     ═══════════════════════════════════════ */

  /* Error / Danger */
  --lemon-error:            #ef4444;
  --lemon-error-alpha10:    rgba(239, 68, 68, 0.10);
  --lemon-error-alpha20:    rgba(239, 68, 68, 0.20);
  --lemon-error-alpha50:    rgba(239, 68, 68, 0.50);

  /* Warning */
  --lemon-warning:          #fbbf24;
  --lemon-warning-alpha10:  rgba(251, 191, 36, 0.10);
  --lemon-warning-alpha20:  rgba(251, 191, 36, 0.20);
  --lemon-warning-alpha50:  rgba(251, 191, 36, 0.50);

  /* Success */
  --lemon-success:          #34d399;
  --lemon-success-alpha10:  rgba(52, 211, 153, 0.10);
  --lemon-success-alpha20:  rgba(52, 211, 153, 0.20);
  --lemon-success-alpha50:  rgba(52, 211, 153, 0.50);

  /* Info */
  --lemon-info:             #60a5fa;
  --lemon-info-alpha10:     rgba(96, 165, 250, 0.10);
  --lemon-info-alpha20:     rgba(96, 165, 250, 0.20);
  --lemon-info-alpha50:     rgba(96, 165, 250, 0.50);

  /* Neutral */
  --lemon-neutral:          #9ca3af;
  --lemon-neutral-alpha10:  rgba(156, 163, 175, 0.10);
  --lemon-neutral-alpha20:  rgba(156, 163, 175, 0.20);
  --lemon-neutral-alpha50:  rgba(156, 163, 175, 0.50);

  /* Semantic — like / bookmark */
  --lemon-like:             #ff4757;
  --lemon-bookmark:         #f3bf6f;

  /* ═══════════════════════════════════════
     6. GLASS — 玻璃态 / 蒙层
     ═══════════════════════════════════════ */
  --lemon-glass:            rgba(255, 255, 255, 0.08);
  --lemon-glass-border:     rgba(255, 255, 255, 0.14);
  --lemon-glass-strong:     rgba(255, 255, 255, 0.12);

  --lemon-overlay-soft:     rgba(255, 255, 255, 0.05);
  --lemon-overlay-light:    rgba(0, 0, 0, 0.40);
  --lemon-overlay-heavy:    rgba(0, 0, 0, 0.70);
  --lemon-overlay-modal:    rgba(0, 0, 0, 0.80);

  --lemon-dark-overlay-10:  rgba(21, 6, 43, 0.10);
  --lemon-dark-overlay-30:  rgba(21, 6, 43, 0.30);
  --lemon-dark-overlay-70:  rgba(21, 6, 43, 0.70);
  --lemon-dark-overlay-95:  rgba(21, 6, 43, 0.95);

  /* ═══════════════════════════════════════
     7. CARD
     ═══════════════════════════════════════ */
  --lemon-card-bg:          rgba(255, 255, 255, 0.06);
  --lemon-card-border:      rgba(255, 255, 255, 0.10);
  --lemon-card-hover-border: rgba(156, 91, 252, 0.35);
  --lemon-card-hover-glow:  0 12px 28px rgba(0, 0, 0, 0.25);

  --lemon-card-shimmer-base:      rgba(255, 255, 255, 0.04);
  --lemon-card-shimmer-highlight:  rgba(255, 255, 255, 0.09);

  /* ═══════════════════════════════════════
     8. FORM — 输入框 / 选择器
     ═══════════════════════════════════════ */
  --lemon-input-bg:         rgba(255, 255, 255, 0.06);
  --lemon-input-border:     rgba(255, 255, 255, 0.10);
  --lemon-input-focus-ring: rgba(156, 91, 252, 0.30);

  /* ═══════════════════════════════════════
     9. GRADIENTS — 品牌渐变
     ═══════════════════════════════════════ */
  --lemon-gradient-brand:       linear-gradient(135deg, #b06afc 0%, #7c2df8 100%);
  --lemon-gradient-brand-soft:  linear-gradient(135deg, rgba(156, 91, 252, 0.90) 0%, rgba(156, 91, 252, 0.65) 100%);
  --lemon-gradient-surface:     linear-gradient(135deg, #241540 0%, #321e56 100%);
  --lemon-gradient-placeholder: linear-gradient(135deg, #1c0e33 0%, #2a1a4a 100%);

  /* 按钮玻璃光泽 */
  --lemon-gradient-glass:       linear-gradient(135deg, rgba(255,255,255,0.22) 0%, transparent 45%, rgba(255,255,255,0.28) 100%);
  --lemon-gradient-glass-subtle: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, transparent 45%, rgba(255,255,255,0.22) 100%);

  /* 图片覆盖层 */
  --lemon-gradient-image-overlay: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 40%,
    rgba(21, 6, 43, 0.30) 60%,
    rgba(21, 6, 43, 0.70) 80%,
    rgba(21, 6, 43, 0.95) 95%,
    #15062b 100%
  );

  /* ═══════════════════════════════════════
     10. SPACING — 12 级间距
     ═══════════════════════════════════════ */
  --lemon-sp-xs:   2px;
  --lemon-sp-sm:   4px;
  --lemon-sp-md:   6px;
  --lemon-sp-lg:   8px;
  --lemon-sp-xl:   10px;
  --lemon-sp-2xl:  12px;
  --lemon-sp-3xl:  16px;
  --lemon-sp-4xl:  20px;
  --lemon-sp-5xl:  24px;
  --lemon-sp-6xl:  32px;
  --lemon-sp-7xl:  40px;
  --lemon-sp-8xl:  48px;
  --lemon-sp-9xl:  64px;
  --lemon-sp-10xl: 80px;

  /* Gap 语义 */
  --lemon-gap-card:            4px;
  --lemon-gap-grid-mobile:     12px;
  --lemon-gap-grid-desktop:    24px;
  --lemon-gap-section:         32px;

  /* ═══════════════════════════════════════
     11. BORDER RADIUS
     ═══════════════════════════════════════ */
  --lemon-radius-xs:    4px;
  --lemon-radius-sm:    6px;
  --lemon-radius-md:    8px;
  --lemon-radius-lg:    12px;
  --lemon-radius-xl:    16px;
  --lemon-radius-2xl:   20px;
  --lemon-radius-3xl:   24px;
  --lemon-radius-pill:  9999px;
  --lemon-radius-full:  50%;

  /* ═══════════════════════════════════════
     12. SHADOWS
     ═══════════════════════════════════════ */
  --lemon-shadow-sm:       0 4px 12px rgba(0, 0, 0, 0.15);
  --lemon-shadow-md:       0 8px 32px rgba(0, 0, 0, 0.40);
  --lemon-shadow-lg:       0 25px 50px -12px rgba(0, 0, 0, 0.70);
  --lemon-shadow-xl:       0 40px 64px -16px rgba(0, 0, 0, 0.80);
  --lemon-shadow-glow:     0 0 24px rgba(156, 91, 252, 0.25);
  --lemon-shadow-brand-sm: 0 4px 12px rgba(156, 91, 252, 0.30);
  --lemon-shadow-brand-md: 0 8px 20px rgba(156, 91, 252, 0.40);

  /* Focus ring */
  --lemon-focus-ring:      0 0 0 2px rgba(156, 91, 252, 0.30);

  /* ═══════════════════════════════════════
     13. BLUR
     ═══════════════════════════════════════ */
  --lemon-blur-sm:  10px;
  --lemon-blur-md:  20px;
  --lemon-blur-lg:  30px;

  /* ═══════════════════════════════════════
     14. TYPOGRAPHY
     ═══════════════════════════════════════ */

  /* Font Family */
  --lemon-font-family:
    'MiSans', 'HarmonyOS Sans SC', 'PingFang SC',
    'Source Han Sans SC', 'Noto Sans SC',
    'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;

  --lemon-font-family-display:
    'SF Pro Display', -apple-system, BlinkMacSystemFont,
    'PingFang SC', 'Noto Sans SC', sans-serif;

  /* Font Size — 11 级 */
  --lemon-font-xs:    11px;
  --lemon-font-sm:    12px;
  --lemon-font-md:    13px;
  --lemon-font-base:  14px;
  --lemon-font-lg:    15px;
  --lemon-font-xl:    16px;
  --lemon-font-2xl:   18px;
  --lemon-font-3xl:   20px;
  --lemon-font-4xl:   24px;
  --lemon-font-5xl:   28px;
  --lemon-font-6xl:   32px;

  /* Font Weight */
  --lemon-weight-normal:    400;
  --lemon-weight-medium:    500;
  --lemon-weight-semibold:  600;
  --lemon-weight-bold:      700;

  /* Line Height */
  --lemon-lh-tight:    1.2;
  --lemon-lh-snug:     1.4;
  --lemon-lh-normal:   1.5;
  --lemon-lh-relaxed:  1.6;

  /* ═══════════════════════════════════════
     15. SIZING — 组件尺寸
     ═══════════════════════════════════════ */

  /* Sidebar */
  --lemon-sidebar-width:      76px;
  --lemon-sidebar-margin:     76px;

  /* Button */
  --lemon-button-height:      40px;
  --lemon-button-height-sm:   32px;
  --lemon-button-height-lg:   48px;
  --lemon-button-min-width:   38px;

  /* Input */
  --lemon-input-height:       40px;
  --lemon-input-height-sm:    32px;
  --lemon-input-height-lg:    48px;

  /* Modal */
  --lemon-modal-max-width:    480px;
  --lemon-modal-max-height:   80vh;
  --lemon-modal-padding:      20px;
  --lemon-modal-radius:       20px;

  /* Icon */
  --lemon-icon-xs:  14px;
  --lemon-icon-sm:  18px;
  --lemon-icon-md:  20px;
  --lemon-icon-lg:  24px;
  --lemon-icon-xl:  28px;

  /* Avatar */
  --lemon-avatar-sm:  32px;
  --lemon-avatar-md:  40px;
  --lemon-avatar-lg:  56px;

  /* ═══════════════════════════════════════
     16. Z-INDEX
     ═══════════════════════════════════════ */
  --lemon-z-dropdown:   100;
  --lemon-z-sticky:     200;
  --lemon-z-sidebar:    1000;
  --lemon-z-modal:      1001;
  --lemon-z-overlay:    1001;
  --lemon-z-popover:    1002;
  --lemon-z-toast:      2000;

  /* ═══════════════════════════════════════
     17. OPACITY
     ═══════════════════════════════════════ */
  --lemon-opacity-disabled:  0.40;
  --lemon-opacity-ghost:     0.30;
  --lemon-opacity-secondary: 0.68;
  --lemon-opacity-primary:   1;

  /* ═══════════════════════════════════════
     18. TRANSITION
     ═══════════════════════════════════════ */
  --lemon-transition-fast:   0.2s ease;
  --lemon-transition-normal: 0.3s ease;
  --lemon-transition-slow:   0.5s ease;
  --lemon-transition-spring: 0.3s cubic-bezier(0.32, 0.72, 0, 1);

  /* ═══════════════════════════════════════
     19. BREAKPOINTS (仅文档参考，CSS 中用 @media)
         mobile:    ≤ 768px
         tablet:    ≤ 1024px
         desktop:   ≥ 769px
         wide:      ≥ 1440px
     ═══════════════════════════════════════ */

  /* ═══════════════════════════════════════
     20. SIDEBAR — 侧栏专用 token
     ═══════════════════════════════════════ */
  --lemon-side-rail-bg:             transparent;
  --lemon-side-rail-border:         rgba(255, 255, 255, 0.08);
  --lemon-side-rail-text:           rgba(255, 255, 255, 0.55);
  --lemon-side-rail-text-active:    #ffffff;
  --lemon-side-rail-text-muted:     rgba(255, 255, 255, 0.38);
  --lemon-side-rail-item-active-bg: rgba(156, 91, 252, 0.22);

  /* ═══════════════════════════════════════
     21. ANIMATION
     ═══════════════════════════════════════ */
  --lemon-anim-shimmer: 1.5s linear infinite;

  /* ═══════════════════════════════════════
     22. SCROLLBAR
     ═══════════════════════════════════════ */
  --lemon-scrollbar-track:  transparent;
  --lemon-scrollbar-thumb:  rgba(255, 255, 255, 0.15);
  --lemon-scrollbar-hover:  rgba(255, 255, 255, 0.25);
  --lemon-scrollbar-width:  6px;
}