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

@layer base {
  * { box-sizing: border-box; }

  html, body, #root {
    height: 100%;
    background-color: #0d0d0d;
    color: #f4f4f5;
    font-family: 'Inter', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Scrollbar personnalisée */
  ::-webkit-scrollbar { width: 4px; }
  ::-webkit-scrollbar-track { background: #1a1a1a; }
  ::-webkit-scrollbar-thumb { background: #3a3a3a; border-radius: 2px; }

  /* Safe area iOS */
  .safe-bottom { padding-bottom: env(safe-area-inset-bottom); }
  .safe-top    { padding-top:    env(safe-area-inset-top);    }
}

@layer components {
  .btn-primary {
    @apply bg-accent hover:bg-accent-hover text-white font-semibold px-4 py-2.5 rounded-lg
           transition-all duration-150 active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed;
  }
  .btn-secondary {
    @apply bg-surface2 hover:bg-border text-text font-medium px-4 py-2.5 rounded-lg
           border border-border transition-all duration-150 active:scale-95;
  }
  .btn-ghost {
    @apply hover:bg-surface2 text-text-muted hover:text-text font-medium px-3 py-2 rounded-lg
           transition-all duration-150;
  }
  .card {
    @apply bg-surface border border-border rounded-xl p-4;
  }
  .input {
    @apply bg-surface2 border border-border rounded-lg px-3 py-2.5 text-text placeholder-muted
           focus:outline-none focus:ring-1 focus:ring-accent focus:border-accent
           transition-colors w-full;
  }
  .label {
    @apply block text-sm font-medium text-text-muted mb-1;
  }
  .badge {
    @apply inline-flex items-center px-2 py-0.5 rounded text-xs font-medium;
  }
  .divider {
    @apply border-t border-border my-4;
  }
  .page-header {
    @apply text-xl font-bold text-text mb-6;
  }
}