/*全站设计令牌唯一来源明暗两套同步维护*/
:root {
  /*品牌色*/
  --color-primary: #5B4FE9;
  --color-primary-deep: #4C3FD6;
  --color-primary-soft: #EEECFD;
  --color-brand: #FF2E6E;
  --color-brand-deep: #E51F5D;
  --color-brand-soft: #FFE8EF;

  /*Aurora氛围主色用于光晕与渐变不用于正文*/
  --aurora-violet: #7C5CFF;
  --aurora-pink: #FF6FA5;
  --aurora-blue: #4FA8FF;
  --aurora-mint: #4FE3C1;

  /*背景与表面*/
  --color-bg: #F7F6FC;
  --color-surface: #FFFFFF;
  --color-surface-2: #FBFAFF;
  --color-line: #ECECF4;
  --color-line-strong: #DCDBE8;

  /*文字三级对比度逐级递减*/
  --color-text: #1A1A2E;
  --color-text-2: #5C5C78;
  --color-text-3: #A0A0B8;

  /*语义色*/
  --color-gold: #F5A623;
  --color-success: #22C55E;
  --color-success-soft: #E9F9F0;
  --color-success-deep: #12784A;
  --color-danger: #EF4444;
  --color-danger-soft: #FEECEC;
  --color-danger-deep: #C72626;
  --color-warning: #F59E0B;
  --color-warning-soft: #FEF6E6;

  /*字号阶梯以16为基准*/
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 14px;
  --fs-md: 15px;
  --fs-lg: 16px;
  --fs-xl: 18px;
  --fs-2xl: 20px;
  --fs-3xl: 24px;
  --fs-4xl: 28px;
  --fs-5xl: 32px;
  --fs-6xl: 40px;

  /*字重*/
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /*行高*/
  --lh-tight: 1.25;
  --lh-base: 1.6;
  --lh-relaxed: 1.8;

  /*间距阶梯四的倍数*/
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  /*圆角*/
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 999px;

  /*阴影三级递进*/
  --shadow-card: 0 2px 12px rgba(26,26,46,.06);
  --shadow-hover: 0 8px 24px rgba(26,26,46,.12);
  --shadow-lift: 0 16px 48px rgba(26,26,46,.16);
  --shadow-glow: 0 12px 32px rgba(91,79,233,.24);
  --shadow-glow-brand: 0 12px 32px rgba(255,46,110,.26);

  /*焦点光晕*/
  --ring-primary: rgba(91,79,233,.16);
  --ring-danger: rgba(239,68,68,.16);

  /*玻璃态表面*/
  --glass-bg: rgba(255,255,255,.72);
  --glass-bg-strong: rgba(255,255,255,.86);
  --glass-border: rgba(255,255,255,.72);
  --glass-blur: 16px;

  /*Aurora光晕层*/
  --aurora-glow-1: radial-gradient(circle at 18% 12%, rgba(124,92,255,.24), transparent 46%);
  --aurora-glow-2: radial-gradient(circle at 82% 8%, rgba(255,111,165,.22), transparent 44%);
  --aurora-glow-3: radial-gradient(circle at 62% 88%, rgba(79,168,255,.16), transparent 50%);
  /*品牌渐变用于主按钮与强调区块*/
  --grad-brand: linear-gradient(135deg, var(--aurora-pink), var(--color-brand));
  --grad-primary: linear-gradient(135deg, var(--aurora-violet), var(--color-primary));
  --grad-aurora: linear-gradient(120deg, var(--aurora-violet), var(--color-brand) 62%, var(--aurora-pink));

  /*容器宽度*/
  --container-sm: 848px;
  --container-md: 1080px;
  --container-lg: 1280px;

  /*层级只允许用这五档*/
  --z-base: 0;
  --z-sticky: 20;
  --z-overlay: 40;
  --z-modal: 60;
  --z-toast: 80;

  /*骨架屏与动效*/
  --skeleton-shimmer: linear-gradient(90deg,#EFEEF7 25%,#F7F6FC 37%,#EFEEF7 63%);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 320ms;
  --dur-page: 380ms;
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
}

/*暗色主题压暗光晕提高表面不透明度保证正文对比*/
[data-theme="dark"] {
  --color-primary: #8B80F5;
  --color-primary-deep: #6A5EE8;
  --color-primary-soft: #262440;
  --color-brand: #FF4D84;
  --color-brand-deep: #E51F5D;
  --color-brand-soft: #3A1E2B;

  --aurora-violet: #8F74FF;
  --aurora-pink: #FF7BAE;
  --aurora-blue: #5EB2FF;
  --aurora-mint: #4FE3C1;

  --color-bg: #101018;
  --color-surface: #1A1A28;
  --color-surface-2: #202033;
  --color-line: #2C2C42;
  --color-line-strong: #3A3A56;

  --color-text: #ECECF4;
  --color-text-2: #A8A8C0;
  --color-text-3: #74748E;

  --color-gold: #FFC24B;
  --color-success: #34D399;
  --color-success-soft: #17372B;
  --color-success-deep: #5EE9A1;
  --color-danger: #F87171;
  --color-danger-soft: #3A1E1E;
  --color-danger-deep: #FCA5A5;
  --color-warning: #FBBF24;
  --color-warning-soft: #352A12;

  --shadow-card: 0 2px 12px rgba(0,0,0,.4);
  --shadow-hover: 0 8px 24px rgba(0,0,0,.5);
  --shadow-lift: 0 16px 48px rgba(0,0,0,.6);
  --shadow-glow: 0 12px 32px rgba(139,128,245,.28);
  --shadow-glow-brand: 0 12px 32px rgba(255,77,132,.28);

  --ring-primary: rgba(139,128,245,.28);
  --ring-danger: rgba(248,113,113,.24);

  --glass-bg: rgba(26,26,40,.72);
  --glass-bg-strong: rgba(26,26,40,.88);
  --glass-border: rgba(255,255,255,.08);
  --glass-blur: 16px;

  --aurora-glow-1: radial-gradient(circle at 18% 12%, rgba(143,116,255,.20), transparent 46%);
  --aurora-glow-2: radial-gradient(circle at 82% 8%, rgba(255,123,174,.16), transparent 44%);
  --aurora-glow-3: radial-gradient(circle at 62% 88%, rgba(94,178,255,.12), transparent 50%);

  --skeleton-shimmer: linear-gradient(90deg,#232336 25%,#1A1A28 37%,#232336 63%);
}

/*主题切换时只过渡颜色类属性避免布局跳动*/
html.theme-transition,
html.theme-transition * {
  transition: background-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}

/*系统要求减少动效时统一关闭动画与过渡*/
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
