@import "tailwindcss";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Playfair+Display:ital,wght@0,700;0,900;1,700&display=swap');

@theme {
  --color-mil: #2f3e2e;
  --color-sand: #f3ecd9;
  --color-accent: #d89a2b;
  --color-ok: #1f7a3f;
  --color-danger: #b42318;
  
  --font-sans: 'Montserrat', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-fantasy: 'Playfair Display', serif;
}

@layer base {
  body {
    @apply bg-mil text-sand font-sans min-h-screen;
  }
}

@layer components {
  .app-card {
    @apply rounded-xl border border-mil/10 bg-sand text-mil shadow-lg overflow-hidden;
  }

  .btn-primary {
    @apply inline-flex items-center gap-2 rounded-lg px-4 py-2 font-semibold bg-accent text-mil border border-black/10 transition-all hover:brightness-105 active:scale-95 disabled:opacity-50;
  }

  .btn-secondary {
    @apply inline-flex items-center gap-2 rounded-lg px-4 py-2 font-semibold bg-mil text-sand border border-white/10 transition-all hover:brightness-110 active:scale-95;
  }

  .btn-danger {
    @apply inline-flex items-center gap-2 rounded-lg px-4 py-2 font-semibold bg-danger text-white border border-black/10 transition-all hover:brightness-110 active:scale-95;
  }

  .app-input {
    @apply rounded-lg border border-mil/20 bg-sand/90 text-mil px-3 py-2 transition-all focus:outline-none focus:ring-2 focus:ring-accent/50;
  }

  .nav-item {
    @apply inline-flex items-center rounded-lg px-3 py-2 text-sm font-medium text-sand border border-sand/20 bg-sand/10 transition-all hover:bg-sand/20;
  }

  .nav-item-active {
    @apply bg-accent text-mil border-black/20 shadow-inner;
  }

  .app-topbar {
    @apply rounded-xl border border-sand/20 bg-sand/10 backdrop-blur-md p-4 mb-6 shadow-xl;
  }
}

/* Custom Utilities */
.text-gradient {
  @apply bg-clip-text text-transparent bg-gradient-to-r from-yellow-300 via-amber-400 to-yellow-300;
  filter: drop-shadow(0 0 20px rgba(251, 191, 36, 0.4));
  text-shadow: 0 0 40px rgba(251, 191, 36, 0.3);
}

.logo-text {
  @apply bg-clip-text text-transparent bg-gradient-to-br from-yellow-200 via-amber-400 to-yellow-500;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) drop-shadow(0 0 30px rgba(251, 191, 36, 0.5));
  position: relative;
  font-family: 'Playfair Display', serif;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: capitalize;
  display: inline-block;
}

.logo-text::before {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #fef3c7 0%, #fbbf24 50%, #f59e0b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0;
  filter: blur(8px);
  transition: opacity 0.3s ease;
}

.logo-text:hover::before {
  opacity: 0.6;
}

.military-pattern {
  background-image: radial-gradient(circle at 2px 2px, rgba(243,236,217,0.05) 1px, transparent 0);
  background-size: 24px 24px;
}