/* ============================================================
   Theme variables — change here to retheme the whole app
   ============================================================ */
:root {
  --color-primary:       #3b82f6; /* buttons, links, focus rings */
  --color-primary-hover: #2563eb;
  --color-success:       #22c55e; /* complete button */
  --color-success-hover: #16a34a;
  --color-success-bg:    #dcfce7; /* checked item background */
  --color-danger:        #ef4444; /* remove buttons */
  --color-danger-hover:  #dc2626;
  --color-bg:            #f3f4f6; /* page background */
  --color-surface:       #ffffff; /* card / item background */
  --color-text:          #111827;
  --color-text-muted:    #6b7280;
  --color-border:        #d1d5db;
  --radius:              0.5rem;
  --max-width:           48rem;   /* 3xl */
}

/* Dark theme overrides */
.dark {
  --color-primary:       #60a5fa;
  --color-primary-hover: #3b82f6;
  --color-success:       #4ade80;
  --color-success-hover: #22c55e;
  --color-success-bg:    rgba(20, 83, 45, 0.3);
  --color-danger:        #f87171;
  --color-danger-hover:  #ef4444;
  --color-bg:            #111827;
  --color-surface:       #1f2937;
  --color-text:          #f9fafb;
  --color-text-muted:    #9ca3af;
  --color-border:        #374151;
}

/* ============================================================
   Ljuca mode
   ============================================================ */

/* Cap the image so it never overflows the viewport regardless of size */
#ljucaImg {
  max-height: calc(100dvh - 260px);
  object-fit: contain;
}

/* ============================================================
   Heart animation (Ljuca mode)
   ============================================================ */
.heart-area {
  position: relative;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
}

.pixel-heart {
  position: absolute;
  font-size: 36px;
  line-height: 1;
  filter: contrast(200%) saturate(200%);
  transform-origin: center;
  will-change: transform, opacity;
  animation-name: floaty;
  animation-duration: 1600ms;
  animation-iteration-count: infinite;
  animation-timing-function: steps(4, end);
  animation-play-state: paused;
  text-rendering: optimizeSpeed;
  image-rendering: pixelated;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', 'Courier New', monospace;
}

@keyframes floaty {
  0%   { transform: translateY(0) scale(1);       opacity: 1; }
  50%  { transform: translateY(-24px) scale(1.2); opacity: 0.8; }
  100% { transform: translateY(0) scale(1);       opacity: 1; }
}

.heart-area.animate .pixel-heart          { animation-play-state: running; }
.heart-area .pixel-heart:nth-child(1)     { animation-delay: 0ms;   left: 20%; }
.heart-area .pixel-heart:nth-child(2)     { animation-delay: 800ms; left: 45%; }
.heart-area .pixel-heart:nth-child(3)     { animation-delay: 0;     right: 20%; }