/* Color themes — override CSS variables on body */

body.color-theme-blue {
  --green-900: #0c2340;
  --green-800: #123456;
  --green-700: #1e4a7a;
  --green-500: #3b82c4;
  --green-100: #e8f2fa;
  --green-50: #f3f8fc;
  --pink: #7eb8e8;
  --pink-soft: #eef6fd;
  --border: #dce8f2;
  --shadow: 0 4px 24px rgb(12 35 64 / 0.08);
  --shadow-lg: 0 20px 50px rgb(12 35 64 / 0.12);
}

body.color-theme-earth {
  --green-900: #3d2a14;
  --green-800: #5c3d1e;
  --green-700: #6b4c2a;
  --green-500: #a67c3d;
  --green-100: #f5ebe0;
  --green-50: #faf6f1;
  --pink: #d4a574;
  --pink-soft: #fdf3e8;
  --border: #e8ddd0;
  --shadow: 0 4px 24px rgb(61 42 20 / 0.08);
  --shadow-lg: 0 20px 50px rgb(61 42 20 / 0.12);
}

/* Theme-specific component tweaks */
body.color-theme-blue .hero-slide-fallback {
  background: linear-gradient(135deg, var(--green-900) 0%, var(--green-700) 50%, #2563a8 100%);
}

body.color-theme-earth .hero-slide-fallback {
  background: linear-gradient(135deg, var(--green-900) 0%, var(--green-700) 50%, #c4956a 100%);
}

body.color-theme-blue .pinned-card::before,
body.color-theme-blue .pinned-type-news::before {
  background: linear-gradient(90deg, var(--green-700), var(--pink));
}

body.color-theme-earth .pinned-card::before {
  background: linear-gradient(90deg, var(--green-700), var(--pink));
}

body.color-theme-blue .home-template-preview-classic::before,
body.color-theme-blue .home-template-preview-modern {
  background: linear-gradient(135deg, #1e4a7a, #3b82c4);
}

body.color-theme-earth .home-template-preview-classic::before,
body.color-theme-earth .home-template-preview-modern {
  background: linear-gradient(135deg, #6b4c2a, #a67c3d);
}