/* ==========================================================================
   DESIGN 03 — COLORFUL MODERN
   Bright modern design with attractive gradients, colorful accents,
   clean white sections, bold typography and engaging article cards.
   ========================================================================== */

[data-theme="colorful"] {
  --bg-primary: #fdfefe;
  --bg-secondary: #f4f6fb;
  --bg-tertiary: #edf2f9;
  --header-bg: rgba(253, 254, 254, 0.94);
  --topbar-bg: linear-gradient(90deg, #fff5f5 0%, #f0f9ff 50%, #fdf4ff 100%);
  --footer-bg: #14132b;
  
  --card-bg: #ffffff;
  --border-color: #e5e7f2;
  --border-focus: #f43f5e;

  --text-primary: #18182b;
  --text-secondary: #4a4a68;
  --text-muted: #8d8da6;
  
  --accent-color: #f43f5e;
  --accent-light: #fb7185;
  --accent-gradient: linear-gradient(135deg, #f43f5e 0%, #fb923c 50%, #f59e0b 100%);
  --accent-glow: rgba(244, 63, 94, 0.35);
  
  --btn-active-bg: linear-gradient(135deg, #f43f5e 0%, #8b5cf6 100%);
  --btn-active-text: #ffffff;

  --shadow-card: 0 4px 18px rgba(139, 92, 246, 0.08);
  --shadow-hover: 0 16px 32px rgba(244, 63, 94, 0.15), 0 6px 12px rgba(0, 0, 0, 0.05);
  --shadow-glow: 0 16px 36px rgba(244, 63, 94, 0.25);
}

[data-theme="colorful"] .hero-category-tag,
[data-theme="colorful"] .article-cat-badge,
[data-theme="colorful"] .archive-category-pill {
  background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);
}

[data-theme="colorful"] .article-card {
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, #ec4899, #8b5cf6, #3b82f6) 1;
  transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

[data-theme="colorful"] .article-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 20px 35px rgba(139, 92, 246, 0.18);
}

[data-theme="colorful"] .wide-newsletter-box {
  background: linear-gradient(135deg, #f43f5e 0%, #8b5cf6 50%, #3b82f6 100%);
}

[data-theme="colorful"] .cat-icon-badge {
  background: linear-gradient(135deg, #ffe4e6 0%, #ede9fe 100%);
  color: #db2777;
}

[data-theme="colorful"] .cat-showcase-card:hover .cat-icon-badge {
  background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);
  color: #ffffff;
}

[data-theme="colorful"] .section-title-icon {
  background: linear-gradient(135deg, #f43f5e 0%, #ec4899 100%);
}

[data-theme="colorful"] .error-code-huge {
  background: linear-gradient(135deg, #f43f5e 0%, #8b5cf6 50%, #06b6d4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}