@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --font-mono: 'JetBrains Mono', monospace;
    
    --background: 210 20% 97%;
    --foreground: 210 25% 15%;
    
    --card: 0 0% 100%;
    --card-foreground: 210 25% 15%;
    
    --popover: 0 0% 100%;
    --popover-foreground: 210 25% 15%;
    
    --primary: 210 80% 25%;
    --primary-foreground: 210 20% 98%;
    
    --secondary: 210 15% 90%;
    --secondary-foreground: 210 25% 15%;
    
    --muted: 210 15% 94%;
    --muted-foreground: 210 50% 30%;
    
    --accent: 210 30% 85%;
    --accent-foreground: 210 25% 15%;
    
    --destructive: 0 70% 60%;
    --destructive-foreground: 210 20% 98%;
    
    --border: 210 15% 86%;
    --input: 210 15% 86%;
    --ring: 210 80% 25%;
    
    --radius: 0.25rem;
  }
}

@layer base {
  * {
    @apply border-border;
    font-family: var(--font-mono);
    -webkit-font-smoothing: none;
    font-smooth: never;
  }

  body {
    @apply bg-background text-foreground;
    margin: 0;
    min-height: 100vh;
    font-feature-settings: "ss01", "ss02", "cv01", "cv02";
  }
}

@layer components {
  .btn-primary {
    @apply inline-flex items-center justify-center bg-primary px-4 py-2 text-sm font-medium text-primary-foreground ring-offset-background transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50;
  }

  .btn-ghost {
    @apply inline-flex items-center justify-center px-4 py-2 text-sm font-medium ring-offset-background transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50;
  }

  .card {
    @apply border bg-card text-card-foreground shadow-sm;
  }
}

/* Animated ellipsis */
@keyframes ellipsis {
  0% { content: "Search Caliber"; }
  25% { content: "Search Caliber."; }
  50% { content: "Search Caliber.."; }
  75% { content: "Search Caliber..."; }
  100% { content: "Search Caliber"; }
}

.search-input::placeholder {
  animation: ellipsis 2s steps(1) infinite;
}

/* Subtle scanlines effect */
.scanlines {
  position: relative;
}

.scanlines::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.02) 0,
    rgba(0, 0, 0, 0.02) 1px,
    transparent 1px,
    transparent 2px
  );
  pointer-events: none;
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

/* Hunt-unit topographic map (Leaflet, loaded on demand) */
.topo-unit-label {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: hsl(var(--muted-foreground));
  font-size: 11px;
  font-weight: 600;
  text-shadow: 0 0 3px hsl(var(--background)), 0 0 3px hsl(var(--background));
}
.topo-unit-label--active { color: hsl(var(--primary)); font-size: 13px; }
.leaflet-container { border-radius: var(--radius); font: inherit; }