@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700&display=swap');
@import "tailwindcss";

@theme {
  --color-bg-deep: #0d1117;
  --color-bg-surface: #161b22;
  --color-bg-elevated: #1f2937;
  --color-bg-card: #1a2233;
  --color-border: #2d3748;
  --color-border-bright: #4a5568;

  --color-gold: #f0c040;
  --color-gold-dim: #b8922e;
  --color-gold-bg: #2a1f00;

  --color-blue-dofus: #4a9eff;
  --color-blue-dim: #2563eb;

  --color-green: #4ade80;
  --color-green-dim: #166534;

  --color-red: #f87171;
  --color-red-dim: #7f1d1d;

  --color-text-primary: #e2e8f0;
  --color-text-secondary: #94a3b8;
  --color-text-muted: #4a5568;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  margin: 0;
  padding: 0;
}

::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

* {
  scrollbar-width: none;
}

#root {
  position: fixed;
  inset: 0;
  overflow: hidden;
  overscroll-behavior: none;
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
}

body {
  background: transparent;
  color: var(--color-text-primary);
  user-select: none;
}

/* Scrollbar explicite sur les zones qui en ont besoin */
.with-scrollbar {
  scrollbar-width: thin !important;
  scrollbar-color: var(--color-border-bright) var(--color-bg-deep) !important;
}
.with-scrollbar::-webkit-scrollbar {
  display: block !important;
  width: 4px !important;
  height: 4px !important;
}
.with-scrollbar::-webkit-scrollbar-track {
  background: var(--color-bg-deep) !important;
}
.with-scrollbar::-webkit-scrollbar-thumb {
  background: var(--color-border-bright) !important;
  border-radius: 2px !important;
}
.with-scrollbar::-webkit-scrollbar-thumb:hover {
  background: var(--color-gold-dim) !important;
}

/* Checkbox custom */
input[type="checkbox"] {
  accent-color: var(--color-gold);
  width: 14px;
  height: 14px;
  cursor: pointer;
  flex-shrink: 0;
}

/* Selection */
::selection {
  background: rgba(240, 192, 64, 0.3);
  color: var(--color-text-primary);
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.animate-fade-in {
  animation: fadeIn 0.2s ease-out;
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* Drag region : Tauri gère ça via data-tauri-drag-region en JS natif */
[data-tauri-drag-region] {
  cursor: grab;
}

/* Gold gradient text */
.text-gold-gradient {
  background: linear-gradient(135deg, #f0c040, #d4a017);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
