:root {
  /* ==========================================================================
     1. 基础变量 (Typography, Spacing, Radius, Shadow, Misc)
     ========================================================================== */
  --zuoekai-font-family-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;

  --zuoekai-radius-sm: 8px;
  --zuoekai-radius-md: 12px;
  --zuoekai-radius-lg: 16px;
  --zuoekai-radius-xl: 20px;

  --zuoekai-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08);
  --zuoekai-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.12);
  --zuoekai-shadow-lg: 0 18px 50px rgba(15, 23, 42, 0.18);
  
  --zuoekai-motion-duration-fast: 120ms;
  --zuoekai-motion-duration-normal: 180ms;
  --zuoekai-motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  --zuoekai-z-dropdown: 1200;
  --zuoekai-z-tooltip: 1300;
  --zuoekai-z-modal: 1500;
  --zuoekai-z-drawer-overlay: 1500;
  --zuoekai-z-drawer: 1501;
  --zuoekai-z-popover: 1600;
  --zuoekai-z-dock: 2100;
  --zuoekai-z-toast: 2200;

  /* ==========================================================================
     2. 亮暗模式 (Mode) - Surface, Text, Border
     默认：Light Mode
     ========================================================================== */
  --zuoekai-color-surface-page: #f6f7fb;
  --zuoekai-color-surface-panel: #ffffff;
  --zuoekai-color-surface-float: rgba(255, 255, 255, 0.92);
  --zuoekai-color-surface-hover: rgba(15, 23, 42, 0.05);

  --zuoekai-color-border: rgba(15, 23, 42, 0.12);
  --zuoekai-color-border-strong: rgba(15, 23, 42, 0.18);

  --zuoekai-color-text: #0f172a;
  --zuoekai-color-text-secondary: rgba(15, 23, 42, 0.72);
  --zuoekai-color-text-muted: rgba(15, 23, 42, 0.55);
  --zuoekai-color-text-disabled: rgba(15, 23, 42, 0.36);
  --zuoekai-color-text-inverse: rgba(255, 255, 255, 0.96);

  /* 语义色 (状态) - 亮色模式 */
  --zuoekai-color-success-600: #16a34a;
  --zuoekai-color-warning-600: #d97706;
  --zuoekai-color-error-600: #dc2626;
  --zuoekai-color-info-600: #2563eb;

  /* 骨架屏 (Skeleton) */
  --zuoekai-skeleton-bg: #e2e8f0;
  --zuoekai-skeleton-shimmer: rgba(255, 255, 255, 0.6);

  /* ==========================================================================
     3. 主题色 (Theme) - Brand, Gradient
     默认：Galaxy (星河) - Indigo/Purple
     ========================================================================== */
  --zuoekai-color-brand-50: #eef2ff;
  --zuoekai-color-brand-100: #e0e7ff;
  --zuoekai-color-brand-200: #c7d2fe;
  --zuoekai-color-brand-300: #a5b4fc;
  --zuoekai-color-brand-400: #818cf8;
  --zuoekai-color-brand-500: #6366f1;
  --zuoekai-color-brand-600: #4f46e5;
  --zuoekai-color-brand-700: #4338ca;
  --zuoekai-color-brand-800: #3730a3;
  --zuoekai-color-brand-900: #312e81;

  --zuoekai-color-theme-gradient-start: #667eea;
  --zuoekai-color-theme-gradient-end: #764ba2;
  
  --zuoekai-gradient-primary: linear-gradient(135deg, var(--zuoekai-color-theme-gradient-start), var(--zuoekai-color-theme-gradient-end));
  --zuoekai-primary-shadow: 0 4px 15px rgba(118, 75, 162, 0.3);
  --zuoekai-primary-shadow-hover: 0 6px 20px rgba(118, 75, 162, 0.4);

  --zuoekai-color-action-hover-bg: rgba(99, 102, 241, 0.10);
  --zuoekai-shadow-brand-glow: 0 10px 22px rgba(79, 70, 229, 0.28);
  --zuoekai-focus-ring: 0 0 0 3px rgba(99, 102, 241, 0.35);

  /* 滚动条主题变量：默认跟随品牌色与当前主题 */
  --zuoekai-scrollbar-track: transparent;
  --zuoekai-scrollbar-thumb: color-mix(in srgb, var(--zuoekai-color-brand-500) 26%, transparent);
  --zuoekai-scrollbar-thumb-hover: color-mix(in srgb, var(--zuoekai-color-brand-600) 40%, transparent);
}

/* ==========================================================================
   暗色模式覆盖 (Dark Mode Override)
   ========================================================================== */
[data-zuoekai-mode="dark"] {
  --zuoekai-color-surface-page: #0b1020;
  --zuoekai-color-surface-panel: rgba(17, 24, 39, 0.92);
  --zuoekai-color-surface-float: rgba(17, 24, 39, 0.88);
  --zuoekai-color-surface-hover: rgba(255, 255, 255, 0.08);

  --zuoekai-skeleton-bg: rgba(255, 255, 255, 0.12);
  --zuoekai-skeleton-shimmer: rgba(255, 255, 255, 0.1);

  --zuoekai-color-border: rgba(148, 163, 184, 0.18);
  --zuoekai-color-border-strong: rgba(148, 163, 184, 0.26);

  --zuoekai-color-text: rgba(255, 255, 255, 0.92);
  --zuoekai-color-text-secondary: rgba(255, 255, 255, 0.72);
  --zuoekai-color-text-muted: rgba(255, 255, 255, 0.55);
  --zuoekai-color-text-disabled: rgba(255, 255, 255, 0.36);

  /* 暗色模式下提升滚动条可见度，同时继续严格跟随当前主题。
     这里统一使用 brand-500 / brand-600，是因为所有主题都会显式覆盖这两个色阶。 */
  --zuoekai-scrollbar-thumb: color-mix(in srgb, var(--zuoekai-color-brand-500) 42%, rgba(255, 255, 255, 0.12));
  --zuoekai-scrollbar-thumb-hover: color-mix(in srgb, var(--zuoekai-color-brand-600) 56%, rgba(255, 255, 255, 0.18));

  --zuoekai-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28);
  --zuoekai-shadow-md: 0 10px 30px rgba(0, 0, 0, 0.35);
  --zuoekai-shadow-lg: 0 22px 60px rgba(0, 0, 0, 0.45);
}

/* ==========================================================================
   配色主题 (品牌色覆盖)
   ========================================================================== */

/* 主题：星云 (Nebula) - 粉/蓝 (参考插件 'Pink-Blue') */
[data-zuoekai-theme="nebula"] {
  /* Pink-500 作为主品牌色 */
  --zuoekai-color-brand-500: #ec4899;
  --zuoekai-color-brand-600: #db2777;
  
  --zuoekai-color-theme-gradient-start: #ec4899;
  --zuoekai-color-theme-gradient-end: #3b82f6;

  --zuoekai-color-action-hover-bg: rgba(236, 72, 153, 0.10);
  --zuoekai-shadow-brand-glow: 0 10px 22px rgba(236, 72, 153, 0.28);
  --zuoekai-focus-ring: 0 0 0 3px rgba(236, 72, 153, 0.35);
}

/* 主题：极光 (Aurora) - 蓝/天蓝 (参考插件 'Professional Blue') */
[data-zuoekai-theme="aurora"] {
  /* Blue-600 作为主品牌色 */
  --zuoekai-color-brand-500: #2563eb;
  --zuoekai-color-brand-600: #1d4ed8;

  --zuoekai-color-theme-gradient-start: #2563eb;
  --zuoekai-color-theme-gradient-end: #0ea5e9;

  --zuoekai-color-action-hover-bg: rgba(37, 99, 235, 0.10);
  --zuoekai-shadow-brand-glow: 0 10px 22px rgba(37, 99, 235, 0.28);
  --zuoekai-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.35);
}

/* 主题：复古 (Classic) - 粉/紫/黄 (参考插件 'Original') */
[data-zuoekai-theme="classic"] {
  /* Pink-400 等效色作为主色 */
  --zuoekai-color-brand-500: #f98db9; 
  --zuoekai-color-brand-600: #e674a3;

  /* 渐变：粉 -> 浅粉 (匹配插件) 或多色 */
  /* 插件主渐变：linear-gradient(135deg, #f98db9, #ff9bb8) */
  --zuoekai-color-theme-gradient-start: #f98db9;
  --zuoekai-color-theme-gradient-end: #ff9bb8;

  --zuoekai-color-action-hover-bg: rgba(249, 141, 185, 0.10);
  --zuoekai-shadow-brand-glow: 0 10px 22px rgba(249, 141, 185, 0.28);
  --zuoekai-focus-ring: 0 0 0 3px rgba(249, 141, 185, 0.35);
}

[data-zuoekai-theme="black-green"] {
  --zuoekai-color-brand-50: #f0fdf4;
  --zuoekai-color-brand-100: #dcfce7;
  --zuoekai-color-brand-200: #bbf7d0;
  --zuoekai-color-brand-300: #86efac;
  --zuoekai-color-brand-400: #4ade80;
  --zuoekai-color-brand-500: #22c55e;
  --zuoekai-color-brand-600: #16a34a;
  --zuoekai-color-brand-700: #15803d;
  --zuoekai-color-brand-800: #166534;
  --zuoekai-color-brand-900: #14532d;

  --zuoekai-color-theme-gradient-start: #020617;
  --zuoekai-color-theme-gradient-end: #22c55e;

  --zuoekai-primary-shadow: 0 4px 15px rgba(21, 128, 61, 0.28);
  --zuoekai-primary-shadow-hover: 0 6px 20px rgba(21, 128, 61, 0.38);
  --zuoekai-color-action-hover-bg: rgba(34, 197, 94, 0.12);
  --zuoekai-shadow-brand-glow: 0 10px 22px rgba(34, 197, 94, 0.24);
  --zuoekai-focus-ring: 0 0 0 3px rgba(34, 197, 94, 0.28);
}

[data-zuoekai-mode="dark"][data-zuoekai-theme="black-green"] {
  --zuoekai-color-theme-gradient-start: #0f172a;
  --zuoekai-color-theme-gradient-end: #22c55e;
  --zuoekai-primary-shadow: 0 8px 22px rgba(21, 128, 61, 0.34);
  --zuoekai-primary-shadow-hover: 0 10px 28px rgba(21, 128, 61, 0.42);
  --zuoekai-color-action-hover-bg: rgba(34, 197, 94, 0.18);
  --zuoekai-shadow-brand-glow: 0 12px 26px rgba(34, 197, 94, 0.3);
  --zuoekai-focus-ring: 0 0 0 3px rgba(74, 222, 128, 0.32);
}