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

@layer base {
  html {
    font-size: var(--ui-font-size, 14px);
  }
  body {
    @apply bg-bg text-text font-mono selection:bg-yellow/30;
    min-height: 100vh;
  }
}

@layer components {
  /* Cartes avec effet 70s */
  .card-jardin {
    @apply bg-bg-soft border border-bg-hard rounded-xl p-4 shadow-sm 
           transition-all duration-300 hover:shadow-lg hover:border-text-muted/30;
  }

  /* Boutons stylisés */
  .btn-primary {
    @apply bg-yellow text-bg px-4 py-2 rounded-lg font-bold text-sm
           transition-transform active:scale-95 hover:opacity-90;
  }
  
  .btn-outline {
    @apply border border-bg-hard text-text-muted px-4 py-2 rounded-lg text-sm
           hover:bg-bg-hard hover:text-text transition-all;
  }

  /* Badges colorés */
  .badge {
    @apply px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider;
  }
  .badge-green  { @apply bg-green/20 text-green; }
  .badge-yellow { @apply bg-yellow/20 text-yellow; }
  .badge-blue   { @apply bg-blue/20 text-blue; }
  .badge-red    { @apply bg-red/20 text-red; }
  .badge-orange { @apply bg-orange/20 text-orange; }
}

/* Transitions de pages */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.fade-enter-from { opacity: 0; transform: translateY(5px); }
.fade-leave-to { opacity: 0; transform: translateY(-5px); }

* { box-sizing: border-box; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #1d2021; }
::-webkit-scrollbar-thumb { background: #504945; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #665c54; }