/* ============================================================================
   Liquid Glass Design Tokens
   液态玻璃设计令牌 —— Apple visionOS / Sonoma 视觉语言
   ========================================================================== */

:root {
  /* ---------- 玻璃层：三级透明度 ---------- */
  --g1: rgba(255, 255, 255, 0.74);   /* 主面板：卡片、弹窗 */
  --g2: rgba(255, 255, 255, 0.56);   /* 次级：工具条、分组 */
  --g3: rgba(255, 255, 255, 0.36);   /* 容器：外层包裹 */
  --g1-dark: rgba(20, 22, 32, 0.62);
  --g2-dark: rgba(20, 22, 32, 0.46);

  /* ---------- 模糊 ---------- */
  --blur-xs: 10px;
  --blur-s: 18px;
  --blur-m: 30px;
  --blur-l: 48px;
  --blur-xl: 72px;
  --sat: 180%;
  --sat-hi: 220%;

  /* ---------- 发丝高光边（玻璃的关键） ---------- */
  --hairline-top: rgba(255, 255, 255, 0.92);   /* 顶部强高光 */
  --hairline: rgba(255, 255, 255, 0.62);
  --hairline-soft: rgba(255, 255, 255, 0.34);
  --edge: rgba(255, 255, 255, 0.55);
  --edge-outer: rgba(16, 24, 40, 0.06);

  /* ---------- 阴影：多层叠加，越远越淡 ---------- */
  --sh-1: 0 1px 2px rgba(16, 24, 40, 0.06);
  --sh-2: 0 2px 6px -2px rgba(16, 24, 40, 0.10), 0 8px 20px -10px rgba(16, 24, 40, 0.14);
  --sh-3: 0 4px 12px -4px rgba(16, 24, 40, 0.12), 0 18px 40px -18px rgba(16, 24, 40, 0.20);
  --sh-4: 0 8px 24px -8px rgba(16, 24, 40, 0.16), 0 40px 80px -32px rgba(16, 24, 40, 0.26);
  --sh-glass: inset 0 1px 0 var(--hairline-top), inset 0 -1px 0 rgba(255, 255, 255, 0.18),
              var(--sh-2);
  --sh-glass-lg: inset 0 1px 0 var(--hairline-top), inset 0 -1px 0 rgba(255, 255, 255, 0.18),
                 var(--sh-4);
  --sh-inner: inset 0 1px 2px rgba(16, 24, 40, 0.06);

  /* ---------- 苹果系统色 ---------- */
  --blue: #0A84FF;
  --blue-600: #0071E3;
  --indigo: #5E5CE6;
  --purple: #BF5AF2;
  --pink: #FF375F;
  --teal: #40C8E0;
  --green: #30D158;
  --yellow: #FFD60A;
  --orange: #FF9F0A;
  --red: #FF453A;
  --gray: #8E8E93;

  /* 渐变（用于主按钮 / 强调） */
  --grad-blue: linear-gradient(135deg, #4CA8FF 0%, #0A84FF 52%, #0060D6 100%);
  --grad-iris: linear-gradient(135deg, #7C7CFF 0%, #5E5CE6 55%, #4338CA 100%);
  --grad-mint: linear-gradient(135deg, #5AE9A0 0%, #30D158 55%, #1BA94A 100%);
  --grad-sunset: linear-gradient(135deg, #FFC061 0%, #FF9F0A 55%, #E8790A 100%);
  --grad-rose: linear-gradient(135deg, #FF7A9C 0%, #FF375F 55%, #D81E45 100%);
  --grad-aurora: linear-gradient(120deg, #0A84FF 0%, #5E5CE6 34%, #BF5AF2 62%, #FF375F 100%);

  /* ---------- 文字 ---------- */
  --t1: #0A1121;
  --t2: #39435A;
  --t3: #6B7688;
  --t4: #9AA3B4;
  --t-inv: #FFFFFF;
  --t-link: var(--blue-600);

  /* ---------- 圆角：visionOS 大圆角 ---------- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 26px;
  --r-2xl: 34px;
  --r-pill: 999px;

  /* ---------- 间距 ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;

  /* ---------- 动效 ---------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 420ms;

  /* ---------- 字体 ---------- */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
          "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei",
          system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-num: "SF Mono", ui-monospace, SFMono-Regular, "JetBrains Mono",
              Menlo, Consolas, monospace;

  /* ---------- 层级 ---------- */
  --z-ambient: 0;
  --z-content: 1;
  --z-sticky: 100;
  --z-overlay: 500;
  --z-modal: 1000;
  --z-toast: 2000;

  /* ---------- 布局尺寸 ---------- */
  --sidebar-w: 232px;
  --sidebar-w-collapsed: 68px;
  --topbar-h: 56px;
  --page-max: 1560px;
}

/* ============================================================================
   环境光背景：极光渐变 + 噪点。所有玻璃的「背后」就是它。
   ========================================================================== */
.ambient,
body.ambient-body::before {
  position: fixed;
  inset: 0;
  z-index: var(--z-ambient);
  pointer-events: none;
  content: "";
  background:
    radial-gradient(1100px 760px at 10% -8%,  rgba(120, 190, 255, 0.85) 0%, rgba(120, 190, 255, 0) 62%),
    radial-gradient(900px 700px at 96% -4%,   rgba(255, 190, 225, 0.78) 0%, rgba(255, 190, 225, 0) 58%),
    radial-gradient(1000px 820px at 78% 108%, rgba(150, 245, 200, 0.62) 0%, rgba(150, 245, 200, 0) 60%),
    radial-gradient(760px 640px at 30% 104%,  rgba(255, 215, 150, 0.55) 0%, rgba(255, 215, 150, 0) 58%),
    linear-gradient(168deg, #F7F9FE 0%, #EEF3FB 38%, #E9EEF8 68%, #F2F0FA 100%);
}

/* 噪点：消除大面积渐变的色带，让玻璃更「实」 */
.ambient::after {
  content: "";
  position: absolute;
  inset: -50%;
  opacity: 0.42;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
  animation: grain 6s steps(6) infinite;
}
@keyframes grain {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-2%, 1%); }
  40%  { transform: translate(1%, -2%); }
  60%  { transform: translate(-1%, 2%); }
  80%  { transform: translate(2%, 1%); }
  100% { transform: translate(0, 0); }
}

/* 缓慢流动的极光斑（可选，由 skin.js / ambient.js 注入） */
.aurora {
  position: fixed;
  inset: -20%;
  z-index: var(--z-ambient);
  pointer-events: none;
  filter: blur(90px);
  opacity: 0.55;
  background:
    radial-gradient(38% 32% at 22% 30%, rgba(10, 132, 255, 0.42), transparent 70%),
    radial-gradient(34% 30% at 74% 26%, rgba(191, 90, 242, 0.36), transparent 70%),
    radial-gradient(40% 34% at 58% 76%, rgba(48, 209, 88, 0.30), transparent 70%);
  animation: aurora-drift 28s var(--ease-in-out) infinite alternate;
}
@keyframes aurora-drift {
  0%   { transform: translate3d(-3%, -2%, 0) scale(1.02) rotate(0deg); }
  50%  { transform: translate3d(3%, 2%, 0)  scale(1.10) rotate(4deg); }
  100% { transform: translate3d(-2%, 3%, 0) scale(1.04) rotate(-3deg); }
}

/* ============================================================================
   暗色模式
   ========================================================================== */
:root[data-theme="dark"] {
  --g1: rgba(28, 30, 42, 0.68);
  --g2: rgba(28, 30, 42, 0.50);
  --g3: rgba(28, 30, 42, 0.32);
  --hairline-top: rgba(255, 255, 255, 0.26);
  --hairline: rgba(255, 255, 255, 0.16);
  --hairline-soft: rgba(255, 255, 255, 0.10);
  --edge: rgba(255, 255, 255, 0.14);
  --edge-outer: rgba(0, 0, 0, 0.40);
  --t1: #F2F4F9;
  --t2: #C6CCDA;
  --t3: #98A1B4;
  --t4: #737D93;
  --sh-glass: inset 0 1px 0 var(--hairline-top), var(--sh-2);
  --sh-2: 0 2px 6px -2px rgba(0, 0, 0, 0.5), 0 10px 24px -12px rgba(0, 0, 0, 0.6);
  --sh-3: 0 4px 12px -4px rgba(0, 0, 0, 0.55), 0 20px 44px -20px rgba(0, 0, 0, 0.7);
  --sh-glass: inset 0 1px 0 var(--hairline-top), var(--sh-3);
}
:root[data-theme="dark"] .ambient,
body[data-theme="dark"] .ambient {
  background:
    radial-gradient(1100px 760px at 10% -8%,  rgba(10, 70, 150, 0.72) 0%, transparent 62%),
    radial-gradient(900px 700px at 96% -4%,   rgba(110, 30, 120, 0.60) 0%, transparent 58%),
    radial-gradient(1000px 820px at 78% 108%, rgba(10, 90, 70, 0.52) 0%, transparent 60%),
    linear-gradient(168deg, #0B1020 0%, #0D1424 45%, #0A0E1A 100%);
}

@media (prefers-reduced-motion: reduce) {
  .ambient::after, .aurora { animation: none !important; }
  * { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}