/* ============================================
   joai10 Design System — Modern Glassmorphism
   ============================================ */

:root,
[data-theme="dark"] {
  /* Primary palette */
  --bg-primary: #0a0a14;
  --bg-secondary: #10101f;
  --bg-tertiary: #1a1a30;
  --bg-hover: #222244;
  --bg-glass: rgba(16, 16, 31, 0.75);
  --bg-glass-hover: rgba(26, 26, 48, 0.85);

  /* Text */
  --text-primary: #eaeaf0;
  --text-secondary: #9494b0;
  --text-muted: #5a5a78;
  --text-inverse: #0a0a14;

  /* Accent — vibrant violet-blue */
  --accent: #7c6cf0;
  --accent-hover: #6a5ae0;
  --accent-light: rgba(124, 108, 240, 0.12);
  --accent-glow: rgba(124, 108, 240, 0.25);
  --accent-gradient: linear-gradient(135deg, #7c6cf0, #5ebbff);

  /* Borders */
  --border: rgba(255, 255, 255, 0.06);
  --border-light: rgba(255, 255, 255, 0.03);
  --border-accent: rgba(124, 108, 240, 0.3);

  /* Cards */
  --card-bg: rgba(16, 16, 31, 0.6);
  --card-hover: rgba(26, 26, 48, 0.8);
  --card-active: rgba(124, 108, 240, 0.08);
  --card-border: rgba(255, 255, 255, 0.06);
  --card-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);

  /* Semantic */
  --danger: #ff6b7a;
  --danger-bg: rgba(255, 107, 122, 0.1);
  --success: #4ade80;
  --success-bg: rgba(74, 222, 128, 0.1);
  --warning: #fbbf24;
  --bookmark-color: #fbbf24;
  --unread-dot: #7c6cf0;

  /* Shadows */
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.4);
  --shadow-glow: 0 0 20px rgba(124, 108, 240, 0.15);

  /* Glass */
  --glass-blur: 20px;
  --glass-bg: rgba(16, 16, 31, 0.7);
  --glass-border: rgba(255, 255, 255, 0.08);

  /* Scrollbar */
  --scrollbar-track: transparent;
  --scrollbar-thumb: rgba(255, 255, 255, 0.08);

  /* AI boxes */
  --summary-bg: rgba(124, 108, 240, 0.06);
  --summary-border: rgba(124, 108, 240, 0.3);
  --translate-bg: rgba(74, 222, 128, 0.06);
  --translate-border: rgba(74, 222, 128, 0.3);

  /* Animation tokens */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Spacing scale */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Typography */
  --font-sans: 'SF Pro Display', 'PingFang TC', 'Noto Sans TC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Microsoft JhengHei', sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace;

  /* Category colors */
  --cat-ai-updates: #7c6cf0;
  --cat-ai-tutorials: #f0a030;
  --cat-community: #f06090;
  --cat-zh-media: #30c090;
  --cat-custom: #f07050;
}

[data-theme="light"] {
  --bg-primary: #f8f8fc;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f0f0f6;
  --bg-hover: #e8e8f0;
  --bg-glass: rgba(255, 255, 255, 0.8);
  --bg-glass-hover: rgba(248, 248, 252, 0.9);

  --text-primary: #1a1a30;
  --text-secondary: #5a5a78;
  --text-muted: #9494b0;
  --text-inverse: #ffffff;

  --accent: #6c5ce7;
  --accent-hover: #5a4ad6;
  --accent-light: rgba(108, 92, 231, 0.08);
  --accent-glow: rgba(108, 92, 231, 0.12);
  --accent-gradient: linear-gradient(135deg, #6c5ce7, #4da6ff);

  --border: rgba(0, 0, 0, 0.06);
  --border-light: rgba(0, 0, 0, 0.03);
  --border-accent: rgba(108, 92, 231, 0.25);

  --card-bg: rgba(255, 255, 255, 0.8);
  --card-hover: rgba(240, 240, 246, 0.9);
  --card-active: rgba(108, 92, 231, 0.06);
  --card-border: rgba(0, 0, 0, 0.06);
  --card-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);

  --danger: #e03131;
  --danger-bg: rgba(224, 49, 49, 0.06);
  --success: #2f9e44;
  --success-bg: rgba(47, 158, 68, 0.06);
  --warning: #e67700;
  --bookmark-color: #e67700;
  --unread-dot: #6c5ce7;

  --shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.1);
  --shadow-glow: 0 0 20px rgba(108, 92, 231, 0.08);

  --glass-blur: 20px;
  --glass-bg: rgba(255, 255, 255, 0.75);
  --glass-border: rgba(0, 0, 0, 0.06);

  --scrollbar-track: transparent;
  --scrollbar-thumb: rgba(0, 0, 0, 0.1);

  --summary-bg: rgba(108, 92, 231, 0.04);
  --summary-border: rgba(108, 92, 231, 0.2);
  --translate-bg: rgba(47, 158, 68, 0.04);
  --translate-border: rgba(47, 158, 68, 0.2);

  --cat-ai-updates: #6c5ce7;
  --cat-ai-tutorials: #d4880f;
  --cat-community: #d14680;
  --cat-zh-media: #1a9a6a;
  --cat-custom: #d4500f;
}