/* =========================================================
   Wiki 公开站 · 设计令牌
   三套主题：亮（:root）/ 暗（dark）/ 炫彩（color）
   主题由 <html data-theme> 决定，theme.js 在首帧之前写好
   ========================================================= */

:root {
  color-scheme: light;

  /* 圆角：macOS 27 观感的关键，比常规网页大一档 */
  --w-radius-sm: 10px;
  --w-radius-md: 14px;
  --w-radius-lg: 20px;
  --w-radius-xl: 28px;
  --w-radius-pill: 999px;

  /* Apple 风格缓动 */
  --w-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --w-dur: 220ms;

  --w-page: #f5f5f7;
  --w-page-glow: #e8ecf5;
  --w-surface: #ffffff;
  --w-surface-2: #fbfbfd;
  /* 毛玻璃面板的底色，带 alpha */
  --w-glass: rgba(255, 255, 255, 0.72);
  --w-glass-strong: rgba(255, 255, 255, 0.88);
  --w-text: #1d1d1f;
  --w-text-2: #6e6e73;
  --w-text-3: #8e8e93;
  --w-border: rgba(0, 0, 0, 0.08);
  --w-border-strong: rgba(0, 0, 0, 0.16);
  --w-accent: #0071e3;
  --w-accent-soft: rgba(0, 113, 227, 0.1);
  --w-on-accent: #ffffff;
  --w-ok: #1a7f4b;
  --w-danger: #d70015;
  --w-fill: rgba(120, 130, 145, 0.12);

  --w-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --w-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 10px 30px rgba(0, 0, 0, 0.06);
  --w-shadow-float: 0 2px 6px rgba(0, 0, 0, 0.06), 0 20px 50px rgba(0, 0, 0, 0.1);

  --w-code-head: #ececf0;
  --w-code-body: #f7f7f9;

  --w-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC",
    "Helvetica Neue", "Microsoft YaHei", system-ui, sans-serif;
  --w-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", monospace;
}

:root[data-theme='dark'] {
  color-scheme: dark;

  --w-page: #0b0b0d;
  --w-page-glow: #16181f;
  --w-surface: #1c1c1e;
  --w-surface-2: #232326;
  --w-glass: rgba(28, 28, 30, 0.72);
  --w-glass-strong: rgba(38, 38, 41, 0.9);
  --w-text: #f5f5f7;
  --w-text-2: #a1a1a6;
  --w-text-3: #8e8e93;
  --w-border: rgba(255, 255, 255, 0.12);
  --w-border-strong: rgba(255, 255, 255, 0.22);
  --w-accent: #0a84ff;
  --w-accent-soft: rgba(10, 132, 255, 0.18);
  --w-on-accent: #ffffff;
  --w-ok: #4ec27f;
  --w-danger: #ff453a;
  --w-fill: rgba(150, 160, 175, 0.18);

  --w-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --w-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.36);
  --w-shadow-float: 0 2px 6px rgba(0, 0, 0, 0.45), 0 20px 50px rgba(0, 0, 0, 0.5);

  --w-code-head: #26262a;
  --w-code-body: #1a1a1d;
}

/* 炫彩：紫 / 青 / 粉 / 琥珀四簇极光压在浅色渐变上，
   面板走毛玻璃，主色改成幻彩渐变。 */
:root[data-theme='color'] {
  color-scheme: light;

  --w-page: #f6f4ff;
  --w-page-glow: #dbe7ff;
  --w-surface: rgba(255, 255, 255, 0.6);
  --w-surface-2: rgba(255, 255, 255, 0.45);
  --w-glass: rgba(255, 255, 255, 0.55);
  --w-glass-strong: rgba(255, 255, 255, 0.8);
  --w-text: #1c1a33;
  --w-text-2: #5c5a7a;
  --w-text-3: #7b7899;
  --w-border: rgba(104, 86, 214, 0.18);
  --w-border-strong: rgba(104, 86, 214, 0.32);
  --w-accent: #6d5efc;
  --w-accent-soft: rgba(109, 94, 252, 0.14);
  --w-on-accent: #ffffff;
  --w-ok: #0f9d6e;
  --w-danger: #e11d48;
  --w-fill: rgba(124, 92, 255, 0.12);

  --w-shadow-sm: 0 1px 2px rgba(88, 60, 180, 0.08);
  --w-shadow-card: 0 18px 40px rgba(88, 60, 180, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.65);
  --w-shadow-float: 0 24px 60px rgba(88, 60, 180, 0.22);

  --w-code-head: rgba(236, 233, 255, 0.9);
  --w-code-body: rgba(248, 247, 255, 0.8);
}

/* 极光底。fixed 让滚动时毛玻璃始终有颜色可透 */
:root[data-theme='color'] body {
  background:
    radial-gradient(58rem 40rem at 6% -8%, rgba(124, 92, 255, 0.42), transparent 62%),
    radial-gradient(52rem 38rem at 98% 4%, rgba(34, 211, 238, 0.38), transparent 64%),
    radial-gradient(48rem 36rem at 86% 96%, rgba(244, 114, 182, 0.36), transparent 62%),
    radial-gradient(44rem 32rem at 4% 92%, rgba(251, 191, 36, 0.26), transparent 62%),
    linear-gradient(165deg, #f7f5ff 0%, #eff4ff 48%, #fdf2f8 100%);
  background-attachment: fixed;
}

/* 无障碍降级 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --w-dur: 1ms;
  }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  :root,
  :root[data-theme='color'] {
    --w-surface: #ffffff;
    --w-surface-2: #f7f7f9;
    --w-glass: #ffffff;
    --w-glass-strong: #ffffff;
  }
  :root[data-theme='dark'] {
    --w-surface: #1c1c1e;
    --w-surface-2: #232326;
    --w-glass: #1c1c1e;
    --w-glass-strong: #26262a;
  }
}