:root {
  /* Motion & Easing - Luminous & Airy Springs */
  --pn-ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.15);
  --pn-ease-standard: cubic-bezier(0.25, 1, 0.5, 1);
  --pn-motion-spring-bouncy: var(--pn-ease-spring);
  --pn-motion-fast: 0.15s;
  --pn-motion-base: 0.25s;
  --pn-motion-slow: 0.4s;

  /* Typography */
  --pn-font-main: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Icons", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --pn-font-size-body: 14px;
  --pn-line-height-body: 1.5;
  --pn-title-line-height: 1.2;
  --pn-title-letter-spacing: -0.02em;

  /* Foundation Colors (Light Mode) */
  --pn-bg: #F5F5F7;
  --pn-surface-main: #FFFFFF;

  /* Brand */
  --pn-brand-500: #007AFF;
  --pn-brand-hover: #0062CC;
  --pn-brand-active: #0056B3;
  --pn-brand-soft: rgba(0, 122, 255, 0.1);

  /* Text Colors */
  --pn-text-primary: rgba(0, 0, 0, 0.85);
  --pn-text-secondary: rgba(0, 0, 0, 0.55);
  --pn-text-tertiary: rgba(0, 0, 0, 0.35);

  /* Borders & Lines */
  --pn-line: rgba(0, 0, 0, 0.08);
  --pn-line-strong: rgba(0, 0, 0, 0.15);

  /* Luminous & Airy Glassmorphism */
  --pn-glass-base: rgba(255, 255, 255, 0.7);
  /* Safari 的 backdrop-filter blur 成本 ~O(r²)，半径 > 24px 时严重卡顿。
     降到 20px/180% 在视觉上几乎无差别，但可让 Safari 滚动流畅。 */
  --pn-glass-base-blur: blur(20px) saturate(180%);
  --pn-glass-floating: rgba(255, 255, 255, 0.8);
  --pn-glass-floating-blur: blur(20px) saturate(180%);
  --pn-glass-control: rgba(255, 255, 255, 0.5);
  --pn-glass-control-blur: blur(10px) saturate(120%);
  
  --pn-glass-bg: var(--pn-glass-base);
  --pn-glass-blur: var(--pn-glass-base-blur);
  --pn-glass-border: rgba(0, 0, 0, 0.05);
  /* --pn-glass-vision / --pn-vision-shadow: 供 Lightbox、Modal、悬浮面板等
     "vision 风格" 容器使用的别名；与 --pn-glass-bg / --pn-shadow-md 保持一致，
     但允许各页面单独覆盖（如 Lightbox 做更重的磨砂）。 */
  --pn-glass-vision: var(--pn-glass-bg);
  --pn-glass-vision-blur: var(--pn-glass-blur);

  /* Status */
  --pn-ok: #34C759;
  --pn-warn: #FF9500;
  --pn-danger: #FF3B30;

  /* Border Radii */
  --pn-radius-xl: 24px;
  --pn-radius-lg: 16px;
  --pn-radius-md: 10px;
  --pn-radius-sm: 6px;

  /* Soft, Airy Shadows */
  --pn-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.03);
  --pn-shadow-md: 0 12px 32px rgba(0, 0, 0, 0.04);
  --pn-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.06);
  --pn-vision-shadow: var(--pn-shadow-md);

  /* Backward compat */
  --pn-text: var(--pn-text-primary);
  --pn-muted: var(--pn-text-secondary);
  --pn-accent: var(--pn-brand-500);

  /* ———— 字号阶梯 ———— */
  --pn-text-2xs: 11px;
  --pn-text-xs: 12px;
  --pn-text-sm: 13px;
  --pn-text-md: 14px;
  --pn-text-lg: 16px;
  --pn-text-xl: 20px;
  --pn-text-2xl: 24px;
  --pn-text-3xl: 32px;
  --pn-text-hero: 44px;

  /* ———— 行高 ———— */
  --pn-lh-tight: 1.15;
  --pn-lh-snug: 1.3;
  --pn-lh-normal: 1.5;
  --pn-lh-relaxed: 1.65;

  /* ———— 字重 ———— */
  --pn-weight-regular: 400;
  --pn-weight-medium: 500;
  --pn-weight-semibold: 600;
  --pn-weight-bold: 700;

  /* ———— 间距阶梯 ———— */
  --pn-space-1: 4px;
  --pn-space-2: 8px;
  --pn-space-3: 12px;
  --pn-space-4: 16px;
  --pn-space-5: 20px;
  --pn-space-6: 24px;
  --pn-space-7: 28px;
  --pn-space-8: 32px;
  --pn-space-9: 40px;
  --pn-space-10: 48px;
  --pn-space-11: 56px;
  --pn-space-12: 64px;

  /* ———— 阴影分层 / Elevation（光源自上） ———— */
  --pn-elev-0: 0 0 0 0 rgba(0, 0, 0, 0);
  --pn-elev-1: 0 0.5px 1px rgba(0, 0, 0, 0.02), 0 2px 8px -1px rgba(0, 0, 0, 0.04);
  --pn-elev-2: 0 1px 2px rgba(0, 0, 0, 0.03), 0 8px 24px -2px rgba(0, 0, 0, 0.05);
  --pn-elev-3: 0 2px 4px rgba(0, 0, 0, 0.04), 0 16px 40px -6px rgba(0, 0, 0, 0.07);
  --pn-elev-4: 0 3px 6px rgba(0, 0, 0, 0.05), 0 24px 60px -10px rgba(0, 0, 0, 0.09);
  --pn-elev-5: 0 4px 8px rgba(0, 0, 0, 0.06), 0 40px 100px -16px rgba(0, 0, 0, 0.12);

  /* ———— 灰阶 tint（界面分层） ———— */
  --pn-tint-1: rgba(0, 0, 0, 0.02);
  --pn-tint-2: rgba(0, 0, 0, 0.05);
  --pn-tint-3: rgba(0, 0, 0, 0.08);
  --pn-tint-4: rgba(0, 0, 0, 0.11);
  --pn-tint-5: rgba(0, 0, 0, 0.14);

  /* ———— 表面层级 ———— */
  --pn-surface-raised: #FFFFFF;
  --pn-surface-sunken: #FAFAFC;
  --pn-surface-hover: rgba(0, 0, 0, 0.04);
  --pn-surface-active: rgba(0, 0, 0, 0.08);

  /* ———— Overlay / Scrim ———— */
  --pn-scrim-weak: rgba(0, 0, 0, 0.18);
  --pn-scrim-medium: rgba(0, 0, 0, 0.36);
  --pn-scrim-strong: rgba(0, 0, 0, 0.56);
  --pn-scrim-lightbox: rgba(0, 0, 0, 0.85);

  /* ———— Focus Ring ———— */
  --pn-focus-ring: 0 0 0 3px rgba(0, 122, 255, 0.28);

  /* ———— 状态 / 空态 / 骨架屏 token ———— */
  --pn-disabled-opacity: 0.5;
  --pn-empty-icon-opacity: 0.5;
  --pn-skeleton-base: rgba(0, 0, 0, 0.05);
  --pn-skeleton-highlight: rgba(0, 0, 0, 0.09);

  /* ———— 缓动补充 ———— */
  --pn-ease-decel: cubic-bezier(0.2, 0.8, 0.2, 1);
  --pn-ease-accel: cubic-bezier(0.5, 0, 0.8, 0.4);
  --pn-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  /* ———— 持续时长补充 ———— */
  --pn-motion-xfast: 100ms;
  --pn-motion-xslow: 600ms;

  /* ———— 玻璃分级 (Legacy) ———— */
  --pn-glass-strong: var(--pn-glass-base);
  --pn-glass-strong-blur: var(--pn-glass-base-blur);
  --pn-glass-weak: var(--pn-glass-control);
  --pn-glass-weak-blur: var(--pn-glass-control-blur);

  /* ———— 品牌色扩展 ———— */
  --pn-brand-100: #E5F1FF;
  --pn-brand-200: #CCE4FF;
  --pn-brand-300: #99C8FF;
  --pn-brand-400: #4DA2FF;
  --pn-brand-600: #0062CC;
  --pn-brand-700: #004C9E;
  --pn-brand-800: #003570;

  /* ———— Border 强度 ———— */
  --pn-border-subtle: rgba(0, 0, 0, 0.04);
  --pn-border-default: rgba(0, 0, 0, 0.08);
  --pn-border-strong: rgba(0, 0, 0, 0.16);
  --pn-border-focus: var(--pn-brand-500);

  /* ———— Page Backdrops（Luminous & Airy 径向光晕） ———— */
  --pn-grad-page-backdrop:
    radial-gradient(circle at 50% -20%, rgba(240, 244, 255, 0.8) 0%, rgba(245, 247, 250, 0) 50%),
    #FAFAFC;
  --pn-grad-page-backdrop-admin:
    radial-gradient(circle at 80% -10%, rgba(240, 244, 255, 0.65) 0%, rgba(245, 247, 250, 0) 55%),
    #F5F5F7;

  /* ———— Glass 扩展（兼容旧引用） ———— */
  --pn-glass-bg-1: rgba(255, 255, 255, 0.72);
  --pn-glass-bg-2: rgba(255, 255, 255, 0.5);
  --pn-glass-border-inner: rgba(255, 255, 255, 0.6);
  --pn-glass-border-outer: rgba(0, 0, 0, 0.06);
  --pn-glass-highlight: rgba(255, 255, 255, 0.55);
  --pn-glass-noise-opacity: 0.03;
  --pn-glass-saturate: 180%;
  --pn-glass-shadow: 0 12px 32px rgba(0, 0, 0, 0.05);

  /* ———— Brand 渐变 ———— */
  --pn-grad-brand: linear-gradient(135deg, var(--pn-brand-500) 0%, var(--pn-brand-hover) 100%);
  --pn-grad-brand-soft: linear-gradient(135deg, rgba(0, 122, 255, 0.12) 0%, rgba(0, 122, 255, 0.04) 100%);
  --pn-grad-brand-strong: linear-gradient(135deg, var(--pn-brand-hover) 0%, var(--pn-brand-active) 100%);
  --pn-grad-text-brand: linear-gradient(135deg, var(--pn-brand-500), var(--pn-brand-700));
  --pn-grad-surface-soft: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(247, 249, 253, 0.82) 100%);
  --pn-grad-warn-soft: linear-gradient(180deg, #fef3c7 0%, #fde68a 100%);
  --pn-grad-danger-soft: linear-gradient(180deg, rgba(255, 59, 48, 0.12) 0%, rgba(255, 59, 48, 0.04) 100%);

  /* ———— Motion 扩展 ———— */
  --pn-motion-distance-sm: 4px;
  --pn-motion-distance-md: 8px;
  --pn-motion-sm: 0.2s;
  --pn-motion-xs: 80ms;
  --pn-ease-emphasis: cubic-bezier(0.2, 0.8, 0.2, 1);
  --pn-sheen-duration: 1.6s;

  /* ———— Shadow / Surface 别名 ———— */
  --pn-shadow-card: var(--pn-shadow-md);
  --pn-surface-3: rgba(0, 0, 0, 0.05);

  /* ———— Typography 扩展 ———— */
  --pn-title-letter-spacing-tight: -0.03em;
}

@media (prefers-color-scheme: dark) {
  :root {
    --pn-bg: #000000;
    --pn-surface-main: #141416;

    --pn-brand-500: #0A84FF;
    --pn-brand-hover: #007AFF;
    --pn-brand-active: #0062CC;
    --pn-brand-soft: rgba(10, 132, 255, 0.15);

    /* Text Colors */
    --pn-text-primary: rgba(255, 255, 255, 0.92);
    --pn-text-secondary: rgba(255, 255, 255, 0.55);
    --pn-text-tertiary: rgba(255, 255, 255, 0.35);

    /* Borders & Lines */
    --pn-line: rgba(255, 255, 255, 0.08);
    --pn-line-strong: rgba(255, 255, 255, 0.15);

    /* Luminous & Airy Glassmorphism */
    --pn-glass-base: rgba(20, 20, 22, 0.6);
    --pn-glass-base-blur: blur(20px) saturate(180%);
    --pn-glass-floating: rgba(30, 30, 34, 0.7);
    --pn-glass-floating-blur: blur(20px) saturate(180%);
    --pn-glass-control: rgba(255, 255, 255, 0.08);
    --pn-glass-control-blur: blur(10px) saturate(120%);

    --pn-glass-bg: var(--pn-glass-base);
    --pn-glass-blur: var(--pn-glass-base-blur);
    --pn-glass-border: rgba(255, 255, 255, 0.08);
    --pn-glass-vision: var(--pn-glass-bg);
    --pn-glass-vision-blur: var(--pn-glass-blur);

    /* Status */
    --pn-ok: #30D158;
    --pn-warn: #FFD60A;
    --pn-danger: #FF453A;

    /* Shadows */
    --pn-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.4);
    --pn-shadow-md: 0 12px 32px rgba(0, 0, 0, 0.5);
    --pn-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.6);
    --pn-vision-shadow: var(--pn-shadow-md);

    --pn-text: var(--pn-text-primary);
    --pn-muted: var(--pn-text-secondary);

    /* ———— 阴影分层（暗色） ———— */
    --pn-elev-0: 0 0 0 0 rgba(0, 0, 0, 0);
    --pn-elev-1: 0 1px 2px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.4);
    --pn-elev-2: 0 1px 3px rgba(0, 0, 0, 0.6), 0 12px 32px rgba(0, 0, 0, 0.5);
    --pn-elev-3: 0 2px 4px rgba(0, 0, 0, 0.7), 0 24px 60px rgba(0, 0, 0, 0.6);
    --pn-elev-4: 0 3px 6px rgba(0, 0, 0, 0.8), 0 32px 80px rgba(0, 0, 0, 0.7);
    --pn-elev-5: 0 4px 8px rgba(0, 0, 0, 0.9), 0 48px 120px rgba(0, 0, 0, 0.8);

    /* ———— 灰阶 tint ———— */
    --pn-tint-1: rgba(255, 255, 255, 0.03);
    --pn-tint-2: rgba(255, 255, 255, 0.06);
    --pn-tint-3: rgba(255, 255, 255, 0.09);
    --pn-tint-4: rgba(255, 255, 255, 0.12);
    --pn-tint-5: rgba(255, 255, 255, 0.15);

    /* ———— 表面层级 ———— */
    --pn-surface-raised: #202022;
    --pn-surface-sunken: #0C0C0E;
    --pn-surface-hover: rgba(255, 255, 255, 0.05);
    --pn-surface-active: rgba(255, 255, 255, 0.1);

    /* ———— Overlay / Scrim ———— */
    --pn-scrim-weak: rgba(0, 0, 0, 0.4);
    --pn-scrim-medium: rgba(0, 0, 0, 0.6);
    --pn-scrim-strong: rgba(0, 0, 0, 0.8);
    --pn-scrim-lightbox: rgba(0, 0, 0, 0.95);

    /* ———— Focus Ring ———— */
    --pn-focus-ring: 0 0 0 3px rgba(10, 132, 255, 0.28);

    /* ———— 状态 / 空态 / 骨架屏 token（暗色） ———— */
    --pn-empty-icon-opacity: 0.65;
    --pn-skeleton-base: rgba(255, 255, 255, 0.08);
    --pn-skeleton-highlight: rgba(255, 255, 255, 0.14);

    /* ———— Border 强度 ———— */
    --pn-border-subtle: rgba(255, 255, 255, 0.06);
    --pn-border-default: rgba(255, 255, 255, 0.12);
    --pn-border-strong: rgba(255, 255, 255, 0.2);
    --pn-border-focus: var(--pn-brand-500);

    /* ———— Page Backdrops（暗色径向光晕） ———— */
    --pn-grad-page-backdrop:
      radial-gradient(circle at 50% -20%, rgba(30, 40, 60, 0.5) 0%, rgba(0, 0, 0, 0) 50%),
      #000000;
    --pn-grad-page-backdrop-admin:
      radial-gradient(circle at 80% -10%, rgba(30, 40, 60, 0.45) 0%, rgba(0, 0, 0, 0) 55%),
      #08080A;

    /* ———— Glass 扩展（暗色） ———— */
    --pn-glass-bg-1: rgba(28, 28, 32, 0.7);
    --pn-glass-bg-2: rgba(20, 20, 24, 0.55);
    --pn-glass-border-inner: rgba(255, 255, 255, 0.05);
    --pn-glass-border-outer: rgba(255, 255, 255, 0.08);
    --pn-glass-highlight: rgba(255, 255, 255, 0.08);
    --pn-glass-noise-opacity: 0.04;
    --pn-glass-saturate: 180%;
    --pn-glass-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);

    /* ———— Brand 渐变（暗色） ———— */
    --pn-grad-brand: linear-gradient(135deg, var(--pn-brand-500) 0%, var(--pn-brand-hover) 100%);
    --pn-grad-brand-soft: linear-gradient(135deg, rgba(10, 132, 255, 0.18) 0%, rgba(10, 132, 255, 0.04) 100%);
    --pn-grad-brand-strong: linear-gradient(135deg, var(--pn-brand-hover) 0%, var(--pn-brand-active) 100%);
    --pn-grad-text-brand: linear-gradient(135deg, var(--pn-brand-300), var(--pn-brand-500));
    --pn-grad-surface-soft: linear-gradient(180deg, rgba(40, 40, 44, 0.88) 0%, rgba(28, 28, 32, 0.74) 100%);
    --pn-grad-warn-soft: linear-gradient(180deg, rgba(255, 214, 10, 0.18) 0%, rgba(255, 159, 10, 0.08) 100%);
    --pn-grad-danger-soft: linear-gradient(180deg, rgba(255, 69, 58, 0.18) 0%, rgba(255, 69, 58, 0.04) 100%);

    /* ———— Shadow / Surface 别名（暗色） ———— */
    --pn-shadow-card: var(--pn-shadow-md);
    --pn-surface-3: rgba(255, 255, 255, 0.06);
  }
}