/* HolidayHack theme — token overrides on top of styling.css */
:root {
  --color-bg: #fdf9f3;
  --color-bg-soft: #f5ead6;
  --color-surface: #ffffff;
  --color-surface-2: #faf4e6;
  --color-text: #2b2a26;
  --color-text-muted: #7a7164;
  --color-border: #e8ddc8;
  --color-primary: #0b6b41;
  --color-primary-hover: #084f30;
  --color-primary-soft: rgba(11, 107, 65, 0.10);
  --color-accent: #d97706;
  --color-accent-hover: #b45309;
  --color-success: #0b6b41;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0a0e0b;
    --color-bg-soft: #121815;
    --color-surface: #1f2924;
    --color-surface-2: #273331;
    --color-text: #f4efe4;
    --color-text-muted: #a29a89;
    --color-border: #3a4942;
    --color-primary: #2bb57a;
    --color-primary-hover: #4ecf98;
    --color-primary-soft: rgba(43, 181, 122, 0.18);
    --color-accent: #f59e0b;
    --color-accent-hover: #fbbf24;
    --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 background wash for the holiday warmth (desktop only — mobile stays flat) */
@media (min-width: 681px) {
  body {
    background:
      radial-gradient(1200px 600px at 50% -10%, rgba(11, 107, 65, 0.08), transparent 60%),
      radial-gradient(900px 500px at 100% 100%, rgba(217, 119, 6, 0.06), transparent 70%),
      var(--color-bg);
    background-attachment: fixed;
  }
}

/* Homepage hero cards */
.card1 { background-image: url('/static/images-homepage/b558b9ecdb3ef50ff528.webp'); }
.card2 { background-image: url('/static/images-homepage/933477dfd62b0e0d45fe.webp'); }
.card3 { background-image: url('/static/images-homepage/df922ab0ff4e8da868e0.webp'); }