/* ============================================
   THEME SYSTEM - CSS Custom Properties
   ============================================
   A minimalist yet modern design system
   Based on: WordPress simplicity + Modern aesthetics
   ============================================ */

:root {
  /* RGB values for glow effects */
  --primary-rgb: 19, 60, 138;
  --primary-dark-rgb: 10, 38, 68;
  --accent-rgb: 19, 60, 138;

  /* ============================================
     Theme 1: Hardcore Minimal (硬核极简)
     Pure B&W, maximum whitespace, subtle interactions
     ============================================ */
  --theme-minimal-bg: #ffffff;
  --theme-minimal-bg-secondary: #fafafa;
  --theme-minimal-text: #000000;
  --theme-minimal-text-secondary: #666666;
  --theme-minimal-border: #e5e5e5;
  --theme-minimal-accent: #000000;
  --theme-minimal-hover-bg: #f5f5f5;
  --theme-minimal-radius: 8px;
  --theme-minimal-shadow: none;
  --theme-minimal-transition: all 0.3s ease;

  /* ============================================
     Theme 2: Soft Modern (柔和科技)
     Serif titles, cream background, soft shadows
     ============================================ */
  --theme-soft-bg: #faf9f7;
  --theme-soft-bg-secondary: #ffffff;
  --theme-soft-text: #1a1a1a;
  --theme-soft-text-secondary: #666666;
  --theme-soft-border: #e8e5e0;
  --theme-soft-accent: #6366f1;
  --theme-soft-hover-bg: #f0eeeb;
  --theme-soft-radius: 24px;
  --theme-soft-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  --theme-soft-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  /* ============================================
     Theme 3: Glassmorphism (玻璃质感)
     Frosted glass, transparency, backdrop blur
     ============================================ */
  --theme-glass-bg: rgba(255, 255, 255, 0.7);
  --theme-glass-bg-secondary: rgba(255, 255, 255, 0.5);
  --theme-glass-text: #1a1a1a;
  --theme-glass-text-secondary: #4a4a4a;
  --theme-glass-border: rgba(255, 255, 255, 0.2);
  --theme-glass-accent: #8b5cf6;
  --theme-glass-hover-bg: rgba(255, 255, 255, 0.9);
  --theme-glass-radius: 24px;
  --theme-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  --theme-glass-backdrop: blur(20px);
  --theme-glass-transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  /* ============================================
     Theme 4: Bento Grid (便当盒布局)
     Apple-style grid, clean, modern
     ============================================ */
  --theme-bento-bg: #f5f5f7;
  --theme-bento-bg-secondary: #ffffff;
  --theme-bento-text: #1d1d1f;
  --theme-bento-text-secondary: #86868b;
  --theme-bento-border: #d2d2d7;
  --theme-bento-accent: #0071e3;
  --theme-bento-hover-bg: #ffffff;
  --theme-bento-radius: 24px;
  --theme-bento-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  --theme-bento-shadow-hover: 0 12px 32px rgba(0, 0, 0, 0.12);
  --theme-bento-transition: all 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);

  /* ============================================
     Theme 5: Night Mode (深夜模式)
     Dark background, clean and calm
     ============================================ */
  --theme-dark-bg: #0f0f0f;
  --theme-dark-bg-secondary: #1a1a1a;
  --theme-dark-text: #e5e5e5;
  --theme-dark-text-secondary: #888888;
  --theme-dark-border: #2a2a2a;
  --theme-dark-accent: #00d4ff;
  --theme-dark-hover-bg: #242424;
  --theme-dark-radius: 12px;
  --theme-dark-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
  --theme-dark-transition: all 0.3s ease;

  /* ============================================
     Theme 6: Warm Paper (暖纸风格)
     Cream background, earthy tones, cozy
     ============================================ */
  --theme-warm-bg: #faf6f0;
  --theme-warm-bg-secondary: #ffffff;
  --theme-warm-text: #4a3f35;
  --theme-warm-text-secondary: #8a7a6a;
  --theme-warm-border: #e8dfd4;
  --theme-warm-accent: #c97c4a;
  --theme-warm-hover-bg: #f5efe6;
  --theme-warm-radius: 16px;
  --theme-warm-shadow: 0 4px 20px rgba(74, 63, 53, 0.08);
  --theme-warm-transition: all 0.3s ease;

  /* ============================================
     Theme 7: Cyberpunk (赛博朋克)
     Neon accents, dark futuristic aesthetic
     ============================================ */
  --theme-cyber-bg: #0a0a0f;
  --theme-cyber-bg-secondary: #12121a;
  --theme-cyber-text: #e0e0ff;
  --theme-cyber-text-secondary: #7070a0;
  --theme-cyber-border: #1e1e3a;
  --theme-cyber-accent: #00ffff;
  --theme-cyber-accent-secondary: #ff00ff;
  --theme-cyber-hover-bg: #1a1a2e;
  --theme-cyber-radius: 8px;
  --theme-cyber-shadow: 0 4px 24px rgba(0, 255, 255, 0.15);
  --theme-cyber-transition: all 0.3s ease;

  /* ============================================
     Theme 8: Editorial (杂志风)
     Clean, magazine-style with large typography
     ============================================ */
  --theme-editorial-bg: #ffffff;
  --theme-editorial-bg-secondary: #f8f8f8;
  --theme-editorial-text: #111111;
  --theme-editorial-text-secondary: #666666;
  --theme-editorial-border: #e0e0e0;
  --theme-editorial-accent: #d62828;
  --theme-editorial-hover-bg: #f0f0f0;
  --theme-editorial-radius: 4px;
  --theme-editorial-shadow: none;
  --theme-editorial-transition: all 0.2s ease;

  /* ============================================
     Theme 9: Liquid Retina (液体视网膜)
     Organic, flowing, metaballs, liquid mercury aesthetic
     ============================================ */
  --theme-liquid-bg: #000000;
  --theme-liquid-bg-secondary: #0a0a0a;
  --theme-liquid-text: #ffffff;
  --theme-liquid-text-secondary: #666666;
  --theme-liquid-border: #1a1a1a;
  --theme-liquid-accent: #64ffda;
  --theme-liquid-hover-bg: #141414;
  --theme-liquid-radius: 50%;
  --theme-liquid-shadow: 0 0 40px rgba(100, 255, 218, 0.15);
  --theme-liquid-transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);

  /* ============================================
     Active Theme (default: minimal)
     ============================================ */
  --bg: var(--theme-minimal-bg);
  --bg-secondary: var(--theme-minimal-bg-secondary);
  --text: var(--theme-minimal-text);
  --text-secondary: var(--theme-minimal-text-secondary);
  --border: var(--theme-minimal-border);
  --accent: var(--theme-minimal-accent);
  --hover-bg: var(--theme-minimal-hover-bg);
  --radius: var(--theme-minimal-radius);
  --shadow: var(--theme-minimal-shadow);
  --transition: var(--theme-minimal-transition);
}

/* ============================================
   Theme: System Default (系统默认)
   Original blue color scheme
   ============================================ */
[data-theme="default"] {
  --bg: #ffffff;
  --bg-secondary: #f5f5f5;
  --text: #333333;
  --text-secondary: #666666;
  --border: #e0e0e0;
  --accent: #133c8a;
  --hover-bg: #f0f0f0;
  --radius: 8px;
  --shadow: none;
  --transition: all 0.3s ease;
  --primary: #133c8a;
  --primary-dark: #0a2644;
}

/* ============================================
   Theme: Hardcore Minimal
   ============================================ */
[data-theme="minimal"] {
  --bg: var(--theme-minimal-bg);
  --bg-secondary: var(--theme-minimal-bg-secondary);
  --text: var(--theme-minimal-text);
  --text-secondary: var(--theme-minimal-text-secondary);
  --border: var(--theme-minimal-border);
  --accent: var(--theme-minimal-accent);
  --hover-bg: var(--theme-minimal-hover-bg);
  --radius: var(--theme-minimal-radius);
  --shadow: var(--theme-minimal-shadow);
  --transition: var(--theme-minimal-transition);
  --primary: var(--theme-minimal-accent);
  --primary-dark: #000000;
}

/* ============================================
   Theme: Soft Modern
   ============================================ */
[data-theme="soft"] {
  --bg: var(--theme-soft-bg);
  --bg-secondary: var(--theme-soft-bg-secondary);
  --text: var(--theme-soft-text);
  --text-secondary: var(--theme-soft-text-secondary);
  --border: var(--theme-soft-border);
  --accent: var(--theme-soft-accent);
  --hover-bg: var(--theme-soft-hover-bg);
  --radius: var(--theme-soft-radius);
  --shadow: var(--theme-soft-shadow);
  --transition: var(--theme-soft-transition);
  --primary: var(--theme-soft-accent);
  --primary-dark: #4f46e5;
  --primary-rgb: 99, 102, 241;
  --primary-dark-rgb: 79, 70, 229;
  --accent-rgb: 99, 102, 241;
}

/* ============================================
   Theme: Glassmorphism
   ============================================ */
[data-theme="glass"] {
  --bg: var(--theme-glass-bg);
  --bg-secondary: var(--theme-glass-bg-secondary);
  --text: var(--theme-glass-text);
  --text-secondary: var(--theme-glass-text-secondary);
  --border: var(--theme-glass-border);
  --accent: var(--theme-glass-accent);
  --hover-bg: var(--theme-glass-hover-bg);
  --radius: var(--theme-glass-radius);
  --shadow: var(--theme-glass-shadow);
  --transition: var(--theme-glass-transition);
  --backdrop: var(--theme-glass-backdrop);
  --primary: var(--theme-glass-accent);
  --primary-dark: #7c3aed;
}

/* ============================================
   Theme: Bento Grid
   ============================================ */
[data-theme="bento"] {
  --bg: var(--theme-bento-bg);
  --bg-secondary: var(--theme-bento-bg-secondary);
  --text: var(--theme-bento-text);
  --text-secondary: var(--theme-bento-text-secondary);
  --border: var(--theme-bento-border);
  --accent: var(--theme-bento-accent);
  --hover-bg: var(--theme-bento-hover-bg);
  --radius: var(--theme-bento-radius);
  --shadow: var(--theme-bento-shadow);
  --transition: var(--theme-bento-transition);
  --primary: var(--theme-bento-accent);
  --primary-dark: #0055b3;
}

/* ============================================
   Theme: Night Mode
   ============================================ */
[data-theme="dark"] {
  --bg: var(--theme-dark-bg);
  --bg-secondary: var(--theme-dark-bg-secondary);
  --text: var(--theme-dark-text);
  --text-secondary: var(--theme-dark-text-secondary);
  --border: var(--theme-dark-border);
  --accent: var(--theme-dark-accent);
  --hover-bg: var(--theme-dark-hover-bg);
  --radius: var(--theme-dark-radius);
  --shadow: var(--theme-dark-shadow);
  --transition: var(--theme-dark-transition);
  --primary: var(--theme-dark-accent);
  --primary-dark: #00a8cc;
  --primary-rgb: 0, 212, 255;
  --primary-dark-rgb: 0, 168, 204;
  --accent-rgb: 0, 212, 255;
}

/* ============================================
   Theme: Warm Paper
   ============================================ */
[data-theme="warm"] {
  --bg: var(--theme-warm-bg);
  --bg-secondary: var(--theme-warm-bg-secondary);
  --text: var(--theme-warm-text);
  --text-secondary: var(--theme-warm-text-secondary);
  --border: var(--theme-warm-border);
  --accent: var(--theme-warm-accent);
  --hover-bg: var(--theme-warm-hover-bg);
  --radius: var(--theme-warm-radius);
  --shadow: var(--theme-warm-shadow);
  --transition: var(--theme-warm-transition);
  --primary: var(--theme-warm-accent);
  --primary-dark: #a66338;
}

/* ============================================
   Theme: Cyberpunk
   ============================================ */
[data-theme="cyber"] {
  --bg: var(--theme-cyber-bg);
  --bg-secondary: var(--theme-cyber-bg-secondary);
  --text: var(--theme-cyber-text);
  --text-secondary: var(--theme-cyber-text-secondary);
  --border: var(--theme-cyber-border);
  --accent: var(--theme-cyber-accent);
  --hover-bg: var(--theme-cyber-hover-bg);
  --radius: var(--theme-cyber-radius);
  --shadow: var(--theme-cyber-shadow);
  --transition: var(--theme-cyber-transition);
  --primary: var(--theme-cyber-accent);
  --primary-dark: #00cccc;
  --primary-rgb: 0, 255, 255;
  --primary-dark-rgb: 0, 204, 204;
  --accent-rgb: 0, 255, 255;
}

/* ============================================
   Theme: Editorial
   ============================================ */
[data-theme="editorial"] {
  --bg: var(--theme-editorial-bg);
  --bg-secondary: var(--theme-editorial-bg-secondary);
  --text: var(--theme-editorial-text);
  --text-secondary: var(--theme-editorial-text-secondary);
  --border: var(--theme-editorial-border);
  --accent: var(--theme-editorial-accent);
  --hover-bg: var(--theme-editorial-hover-bg);
  --radius: var(--theme-editorial-radius);
  --shadow: var(--theme-editorial-shadow);
  --transition: var(--theme-editorial-transition);
  --primary: var(--theme-editorial-accent);
  --primary-dark: #b01f1f;
}

/* ============================================
   Theme: Liquid Retina
   ============================================ */
[data-theme="liquid"] {
  --bg: var(--theme-liquid-bg);
  --bg-secondary: var(--theme-liquid-bg-secondary);
  --text: var(--theme-liquid-text);
  --text-secondary: var(--theme-liquid-text-secondary);
  --border: var(--theme-liquid-border);
  --accent: var(--theme-liquid-accent);
  --hover-bg: var(--theme-liquid-hover-bg);
  --radius: var(--theme-liquid-radius);
  --shadow: var(--theme-liquid-shadow);
  --transition: var(--theme-liquid-transition);
  --primary: var(--theme-liquid-accent);
  --primary-dark: #4db6a4;
  --primary-rgb: 100, 255, 218;
  --primary-dark-rgb: 77, 182, 164;
  --accent-rgb: 100, 255, 218;
}