@import "tailwindcss";

/* ============================================================
   Wayfarer theme — Tailwind v4.
   Tokens here become utilities: bg-gold, text-stone, font-pixel…
   All styling lives as utility classes in the components.
   ============================================================ */

/* `static` keeps every color as a CSS variable even if no class uses it,
   because the pixel sprites reference them directly (lib/pixel-art.ts). */
@theme static {
  --color-black: #000000;
  --color-panel: #0a0905; /* faint warmth inside frames so gold reads as metal */
  --color-gold: #c9a54c;
  --color-gold-dim: #5c4a1f;
  --color-gold-bright: #f2d98b;
  --color-ink: #e8e0c9;
  --color-stone: #857e6c;
  --color-teal: #58cbbd;
  --color-teal-off: #1d2a28;
  --color-heart: #d64a3c;
  --color-heart-empty: #4a2420;
}

@theme {
  --font-display: "Cinzel", Georgia, serif;
  --font-pixel: "Silkscreen", system-ui, sans-serif;
  --font-sans: "IBM Plex Sans", system-ui, sans-serif;

  /* The one ambient motion: the hero sprite drifts like a held item. */
  --animate-float: float 3.2s ease-in-out infinite;
  @keyframes float {
    50% {
      transform: translateY(-5px);
    }
  }
}

/* Cut-corner shape for every frame. Set the corner size per element
   with [--cut:22px]; it defaults to 14px. */
@utility chamfer {
  clip-path: polygon(
    var(--cut, 14px) 0, calc(100% - var(--cut, 14px)) 0, 100% var(--cut, 14px),
    100% calc(100% - var(--cut, 14px)), calc(100% - var(--cut, 14px)) 100%,
    var(--cut, 14px) 100%, 0 calc(100% - var(--cut, 14px)), 0 var(--cut, 14px)
  );
}

/* Leaflet builds its own controls, so they can't take utility classes.
   Two things make these overrides win over leaflet.css:
   - they are NOT in an @layer (unlayered CSS always beats layered CSS), and
   - each starts with .leaflet-container, so it is more specific than Leaflet's
     own rule even though leaflet.css loads later. */
.leaflet-container {
  @apply bg-black font-sans;
}
.leaflet-container .leaflet-bar {
  @apply rounded-none border border-gold-dim shadow-none;
}
.leaflet-container .leaflet-bar a {
  @apply rounded-none border-gold-dim bg-black text-gold-bright;
}
.leaflet-container .leaflet-bar a:hover,
.leaflet-container .leaflet-bar a:focus-visible {
  @apply bg-gold text-black;
}
.leaflet-container .leaflet-control.leaflet-control-attribution {
  @apply bg-black/70 text-[10px] text-stone;
}
.leaflet-container .leaflet-control-attribution a {
  @apply text-gold;
}

@layer base {
  html {
    color-scheme: dark;
  }

  body {
    @apply min-h-dvh bg-black font-sans text-ink antialiased;
    /* A single low ember of light behind the hero; the rest stays pure black. */
    background-image:
      radial-gradient(ellipse 65% 42% at 50% 10%, rgb(201 165 76 / 0.11), transparent 72%),
      radial-gradient(ellipse 40% 30% at 80% 24%, rgb(88 203 189 / 0.04), transparent 70%);
  }

  /* Hide the browser's unstyled native clear button on search inputs; PlaceSearch renders its own. */
  input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
  }

  :focus-visible {
    @apply outline-2 outline-offset-3 outline-teal;
  }
}