/* Holiday Themes CSS
 * Toggle themes by changing the theme parameter in the link href
 * Example: holiday-themes.css?theme=winter
 */

/* Default/Winter Theme */
:root {
  --holiday-accent: #22d3ee;
  --holiday-accent-soft: rgba(56, 189, 248, 0.15);
  --holiday-accent-strong: #22c55e;
  --holiday-bg-overlay: rgba(59, 130, 246, 0.1);
}

/* Winter Theme (Default) */
body[data-theme="winter"],
body:not([data-theme]) {
  --holiday-accent: #22d3ee;
  --holiday-accent-soft: rgba(56, 189, 248, 0.15);
  --holiday-accent-strong: #a5f3fc;
  --holiday-bg-overlay: rgba(59, 130, 246, 0.1);
}

body[data-theme="winter"] .card::before,
body:not([data-theme]) .card::before {
  background:
    radial-gradient(circle at top left, rgba(59, 130, 246, 0.35), transparent 55%),
    radial-gradient(circle at bottom right, rgba(165, 243, 252, 0.22), transparent 60%);
}

body[data-theme="winter"] .badge,
body:not([data-theme]) .badge {
  border-color: rgba(165, 243, 252, 0.7);
  color: #e0f2fe;
}

body[data-theme="winter"] .badge-dot,
body:not([data-theme]) .badge-dot {
  background: #22d3ee;
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.9);
}

/* Spring Theme */
body[data-theme="spring"] {
  --holiday-accent: #86efac;
  --holiday-accent-soft: rgba(134, 239, 172, 0.15);
  --holiday-accent-strong: #22c55e;
  --holiday-bg-overlay: rgba(134, 239, 172, 0.1);
}

body[data-theme="spring"] .card::before {
  background:
    radial-gradient(circle at top left, rgba(134, 239, 172, 0.35), transparent 55%),
    radial-gradient(circle at bottom right, rgba(34, 197, 94, 0.22), transparent 60%);
}

body[data-theme="spring"] .badge {
  border-color: rgba(134, 239, 172, 0.7);
  color: #dcfce7;
}

body[data-theme="spring"] .badge-dot {
  background: #86efac;
  box-shadow: 0 0 12px rgba(134, 239, 172, 0.9);
}

body[data-theme="spring"] .headline-highlight {
  background: linear-gradient(120deg, #86efac, #22c55e);
  -webkit-background-clip: text;
  color: transparent;
}

body[data-theme="spring"] .line::before {
  border-color: #86efac;
  box-shadow: 
    0 0 12px rgba(134, 239, 172, 0.8),
    inset -2px -2px 0 rgba(134, 239, 172, 0.3);
}

body[data-theme="spring"] .card-fish {
  background: linear-gradient(135deg, #86efac, #22c55e);
}

/* Summer Theme */
body[data-theme="summer"] {
  --holiday-accent: #fbbf24;
  --holiday-accent-soft: rgba(251, 191, 36, 0.15);
  --holiday-accent-strong: #f59e0b;
  --holiday-bg-overlay: rgba(251, 191, 36, 0.1);
}

body[data-theme="summer"] .card::before {
  background:
    radial-gradient(circle at top left, rgba(251, 191, 36, 0.35), transparent 55%),
    radial-gradient(circle at bottom right, rgba(245, 158, 11, 0.22), transparent 60%);
}

body[data-theme="summer"] .badge {
  border-color: rgba(251, 191, 36, 0.7);
  color: #fef3c7;
}

body[data-theme="summer"] .badge-dot {
  background: #fbbf24;
  box-shadow: 0 0 12px rgba(251, 191, 36, 0.9);
}

body[data-theme="summer"] .headline-highlight {
  background: linear-gradient(120deg, #fbbf24, #f59e0b);
  -webkit-background-clip: text;
  color: transparent;
}

body[data-theme="summer"] .line::before {
  border-color: #fbbf24;
  box-shadow: 
    0 0 12px rgba(251, 191, 36, 0.8),
    inset -2px -2px 0 rgba(251, 191, 36, 0.3);
}

body[data-theme="summer"] .card-fish {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
}

/* Fall Theme */
body[data-theme="fall"] {
  --holiday-accent: #fb923c;
  --holiday-accent-soft: rgba(251, 146, 60, 0.15);
  --holiday-accent-strong: #ea580c;
  --holiday-bg-overlay: rgba(251, 146, 60, 0.1);
}

body[data-theme="fall"] .card::before {
  background:
    radial-gradient(circle at top left, rgba(251, 146, 60, 0.35), transparent 55%),
    radial-gradient(circle at bottom right, rgba(234, 88, 12, 0.22), transparent 60%);
}

body[data-theme="fall"] .badge {
  border-color: rgba(251, 146, 60, 0.7);
  color: #fed7aa;
}

body[data-theme="fall"] .badge-dot {
  background: #fb923c;
  box-shadow: 0 0 12px rgba(251, 146, 60, 0.9);
}

body[data-theme="fall"] .headline-highlight {
  background: linear-gradient(120deg, #fb923c, #ea580c);
  -webkit-background-clip: text;
  color: transparent;
}

body[data-theme="fall"] .line::before {
  border-color: #fb923c;
  box-shadow: 
    0 0 12px rgba(251, 146, 60, 0.8),
    inset -2px -2px 0 rgba(251, 146, 60, 0.3);
}

body[data-theme="fall"] .card-fish {
  background: linear-gradient(135deg, #fb923c, #ea580c);
}

/* Apply holiday theme colors to various elements */
body[data-theme] .qr-icon,
body[data-theme] .nav-icon {
  background: linear-gradient(135deg, var(--holiday-accent), var(--holiday-accent-strong));
}

body[data-theme] .qr-section {
  border-color: rgba(var(--holiday-accent-rgb, 34, 211, 238), 0.7);
}

body[data-theme] .qr-chip {
  border-color: rgba(var(--holiday-accent-rgb, 34, 211, 238), 0.7);
}

body[data-theme] .qr-bullet {
  background: rgba(var(--holiday-accent-rgb, 34, 211, 238), 0.9);
}

/* Spring specific adjustments */
body[data-theme="spring"] .qr-icon,
body[data-theme="spring"] .nav-icon {
  background: linear-gradient(135deg, #86efac, #22c55e);
  color: #0b1120;
}

body[data-theme="spring"] .qr-section {
  border-color: rgba(134, 239, 172, 0.7);
}

body[data-theme="spring"] .qr-chip {
  border-color: rgba(134, 239, 172, 0.7);
}

body[data-theme="spring"] .qr-bullet {
  background: rgba(134, 239, 172, 0.9);
}

/* Summer specific adjustments */
body[data-theme="summer"] .qr-icon,
body[data-theme="summer"] .nav-icon {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #0b1120;
}

body[data-theme="summer"] .qr-section {
  border-color: rgba(251, 191, 36, 0.7);
}

body[data-theme="summer"] .qr-chip {
  border-color: rgba(251, 191, 36, 0.7);
}

body[data-theme="summer"] .qr-bullet {
  background: rgba(251, 191, 36, 0.9);
}

/* Fall specific adjustments */
body[data-theme="fall"] .qr-icon,
body[data-theme="fall"] .nav-icon {
  background: linear-gradient(135deg, #fb923c, #ea580c);
  color: #0b1120;
}

body[data-theme="fall"] .qr-section {
  border-color: rgba(251, 146, 60, 0.7);
}

body[data-theme="fall"] .qr-chip {
  border-color: rgba(251, 146, 60, 0.7);
}

body[data-theme="fall"] .qr-bullet {
  background: rgba(251, 146, 60, 0.9);
}