/* UpvoteList theme — token overrides on top of styling.css.
   Ocean-blue primary with a warm coral CTA accent for the upvote action. */
:root {
  --color-bg: #9ccbe174;
  --color-bg-soft: #d6e6f5;
  --color-surface: #ffffff;
  --color-surface-2: #f1f5f9;
  --color-text: #0f172a;
  --color-text-muted: #64748b;
  --color-border: #e2e8f0;
  --color-primary: #0369a1;
  --color-primary-hover: #075985;
  --color-primary-soft: rgba(3, 105, 161, 0.10);
  --color-accent: #fb7185;
  --color-accent-hover: #f43f5e;
  --color-accent-soft: rgba(244, 63, 94, 0.10);
  --color-success: #059669;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #020617;
    --color-bg-soft: #0b1220;
    --color-surface: #0f172a;
    --color-surface-2: #1e293b;
    --color-text: #f8fafc;
    --color-text-muted: #94a3b8;
    --color-border: #334155;
    --color-primary: #38bdf8;
    --color-primary-hover: #7dd3fc;
    --color-primary-soft: rgba(56, 189, 248, 0.18);
    --color-accent: #fb7185;
    --color-accent-hover: #fda4af;
    --color-accent-soft: rgba(251, 113, 133, 0.20);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.5), 0 8px 20px rgba(0, 0, 0, 0.3);
  }
}

/* Subtle ocean + coral background washes (desktop only — mobile stays flat) */
@media (min-width: 681px) {
  body {
    background:
      radial-gradient(1200px 600px at 50% -10%, rgba(3, 105, 161, 0.09), transparent 60%),
      radial-gradient(900px 500px at 100% 100%, rgba(244, 63, 94, 0.06), transparent 70%),
      var(--color-bg);
    background-attachment: fixed;
  }
}

/* UpvoteList CTAs use the coral accent so the primary action (upvote / start)
   pops against the ocean-blue visit button. */
.btn-success,
#new-project a,
.start-project a {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.btn-success:hover,
#new-project a:hover,
.start-project a:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}
.btn-success.disabled, .btn-success:disabled {
  background: color-mix(in oklab, var(--color-accent) 55%, white);
  border-color: color-mix(in oklab, var(--color-accent) 55%, white);
}

/* Keep the remove-upvote (X) outlined in the accent so it visually pairs with the upvote.
   Background MUST be explicitly reset to transparent here — .btn-success in this same
   file paints the same coral background and would otherwise erase the X glyph
   (text + bg both end up var(--color-accent)). */
.remove-upvote {
  color: var(--color-accent);
  background: transparent;
  border-color: var(--color-accent);
}
.remove-upvote:hover {
  background: var(--color-accent-soft);
}

/* Vote pulse picks up the accent tint so it harmonizes with the coral CTA */
@keyframes votePulse {
  0%   { transform: scale(1); box-shadow: 0 0 0 0 var(--color-accent-soft); }
  45%  { transform: scale(1.06); box-shadow: 0 0 0 10px transparent; }
  100% { transform: scale(1); box-shadow: 0 0 0 0 transparent; }
}

/* Homepage hero cards */
.card1 { background-image: url('/static/images-homepage/0f1e79f1fdf8b842305d.webp'); }
.card2 { background-image: url('/static/images-homepage/e5cf65bd499ec6f0c2fb.webp'); }
.card3 { background-image: url('/static/images-homepage/1644fa8197ea5d15eea7.webp'); }