@import "tailwindcss";

@theme {
  --color-paper: #f5f0ed;
  --color-paper-dark: #ede6e0;
  --color-slate: #1e1e2a;
  --color-slate-mid: #2e2e3e;
  --color-slate-light: #3a3a4e;
  --color-rose: #c46b5a;
  --color-rose-light: #e8b4a8;
  --color-muted: #8a8097;
  --color-rule: #363647;

  --font-display: 'Syne', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'DM Mono', monospace;

  --animate-fade-in: fade-in 0.5s ease both;
  --animate-fade-up: fade-up 0.6s ease both;
  --animate-slide-in: slide-in 0.4s ease both;
}

@layer base {
  html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    font-family: var(--font-body);
    background-color: var(--color-slate);
    color: var(--color-paper);
  }

  ::selection {
    background-color: var(--color-rose);
    color: var(--color-paper);
  }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slide-in {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Stagger children with data-animate */
[data-animate] > * {
  opacity: 0;
  animation: fade-up 0.5s ease both;
}

[data-animate] > *:nth-child(1) { animation-delay: 0.05s; }
[data-animate] > *:nth-child(2) { animation-delay: 0.1s; }
[data-animate] > *:nth-child(3) { animation-delay: 0.15s; }
[data-animate] > *:nth-child(4) { animation-delay: 0.2s; }
[data-animate] > *:nth-child(5) { animation-delay: 0.25s; }
[data-animate] > *:nth-child(6) { animation-delay: 0.3s; }
[data-animate] > *:nth-child(7) { animation-delay: 0.35s; }
[data-animate] > *:nth-child(8) { animation-delay: 0.4s; }
[data-animate] > *:nth-child(9) { animation-delay: 0.45s; }
[data-animate] > *:nth-child(10) { animation-delay: 0.5s; }

/* Toast notification */
.toast {
  animation: slide-in 0.3s ease both, fade-in 0.3s ease both;
}

.toast-exit {
  animation: fade-in 0.2s ease reverse both;
}

/* Entry expand transition */
.entry-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.entry-body.expanded {
  grid-template-rows: 1fr;
}

.entry-body > div {
  overflow: hidden;
}

/* Mapbox popup styling */
.heredot-popup .mapboxgl-popup-content {
  background: #2e2e3e;
  color: #f5f0ed;
  font-family: 'Syne', sans-serif;
  font-size: 0.85rem;
  padding: 0.6rem 0.85rem;
  border-radius: 0;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.heredot-popup .mapboxgl-popup-content strong {
  font-weight: 600;
  display: block;
  margin-bottom: 0.15rem;
}

.heredot-popup .mapboxgl-popup-content span {
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  color: #8a8097;
}

.heredot-popup .mapboxgl-popup-tip {
  border-top-color: #2e2e3e;
}

.heredot-popup .mapboxgl-popup-close-button {
  color: #8a8097;
  font-size: 1rem;
  padding: 0.2rem 0.4rem;
}

.heredot-popup .mapboxgl-popup-close-button:hover {
  color: #c46b5a;
  background: transparent;
}

/* Hide Mapbox attribution for cleaner look */
.mapboxgl-ctrl-attrib {
  display: none !important;
}