/* shadcn/ui — neutral palette, standard tokens (light + dark) */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

:root {
  --background: 0 0% 100%;
  --foreground: 0 0% 3.9%;
  --card: 0 0% 100%;
  --card-foreground: 0 0% 3.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 0 0% 3.9%;
  --primary: 0 0% 9%;
  --primary-foreground: 0 0% 98%;
  --secondary: 0 0% 96.1%;
  --secondary-foreground: 0 0% 9%;
  --muted: 0 0% 96.1%;
  --muted-foreground: 0 0% 45.1%;
  --accent: 0 0% 96.1%;
  --accent-foreground: 0 0% 9%;
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 98%;
  --success: 142 71% 45%;
  --warning: 38 92% 50%;
  --border: 0 0% 89.8%;
  --input: 0 0% 89.8%;
  --ring: 0 0% 3.9%;
  --radius: 0.5rem;

  /* AI accent — the one chromatic note; overridable via tweak */
  --ai: 256 70% 58%;
  --ai-foreground: 0 0% 100%;
  --ai-soft: 256 75% 96%;

  /* channel hues */
  --ch-event: 256 70% 58%;
  --ch-resto: 199 89% 48%;
  --ch-anim: 322 80% 60%;
  --ch-coup: 142 64% 42%;
  --ch-autre: 38 92% 50%;
}

.dark {
  --background: 0 0% 7%;
  --foreground: 0 0% 98%;
  --card: 0 0% 9.5%;
  --card-foreground: 0 0% 98%;
  --popover: 0 0% 9.5%;
  --popover-foreground: 0 0% 98%;
  --primary: 0 0% 98%;
  --primary-foreground: 0 0% 9%;
  --secondary: 0 0% 14.9%;
  --secondary-foreground: 0 0% 98%;
  --muted: 0 0% 14.9%;
  --muted-foreground: 0 0% 63.9%;
  --accent: 0 0% 16.5%;
  --accent-foreground: 0 0% 98%;
  --destructive: 0 72% 51%;
  --destructive-foreground: 0 0% 98%;
  --success: 142 64% 48%;
  --warning: 38 92% 55%;
  --border: 0 0% 16%;
  --input: 0 0% 18%;
  --ring: 0 0% 83.1%;

  --ai: 256 85% 72%;
  --ai-foreground: 256 30% 12%;
  --ai-soft: 256 40% 18%;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv11', 'ss01';
}
#root { height: 100%; }

/* ---- shadcn primitives ---- */
.mono { font-family: 'Geist Mono', ui-monospace, monospace; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 13px; font-weight: 500; line-height: 1;
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid transparent;
  padding: 0 12px; height: 34px; cursor: pointer;
  transition: background .14s, color .14s, border-color .14s, box-shadow .14s, opacity .14s;
  white-space: nowrap; user-select: none;
}
.btn:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
.btn-primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.btn-primary:hover { opacity: .9; }
.btn-secondary { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); }
.btn-secondary:hover { background: hsl(var(--accent)); }
.btn-outline { border-color: hsl(var(--border)); background: hsl(var(--background)); color: hsl(var(--foreground)); }
.btn-outline:hover { background: hsl(var(--accent)); }
.btn-ghost { background: transparent; color: hsl(var(--foreground)); }
.btn-ghost:hover { background: hsl(var(--accent)); }
.btn-ai { background: hsl(var(--ai)); color: hsl(var(--ai-foreground)); }
.btn-ai:hover { filter: brightness(1.06); }
.btn-sm { height: 28px; font-size: 12px; padding: 0 9px; }
.btn-icon { width: 34px; padding: 0; }
.btn-icon.btn-sm { width: 28px; }

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 500; line-height: 1;
  padding: 3px 8px; border-radius: 999px; border: 1px solid transparent;
  white-space: nowrap;
}
.badge-outline { border-color: hsl(var(--border)); color: hsl(var(--muted-foreground)); }
.badge-secondary { background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground)); }

.input {
  width: 100%; height: 34px; padding: 0 10px;
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid hsl(var(--input));
  background: hsl(var(--background)); color: hsl(var(--foreground));
  font-size: 13px; font-family: inherit;
  transition: border-color .14s, box-shadow .14s;
}
.input::placeholder { color: hsl(var(--muted-foreground)); }
.input:focus { outline: none; border-color: hsl(var(--ring)); box-shadow: 0 0 0 3px hsl(var(--ring) / .12); }

.card {
  background: hsl(var(--card)); color: hsl(var(--card-foreground));
  border: 1px solid hsl(var(--border)); border-radius: var(--radius);
}

.kbd {
  font-family: 'Geist Mono', monospace; font-size: 10.5px;
  padding: 2px 5px; border-radius: 4px;
  border: 1px solid hsl(var(--border)); background: hsl(var(--muted));
  color: hsl(var(--muted-foreground)); line-height: 1;
}

.divider { height: 1px; background: hsl(var(--border)); border: 0; }

/* scrollbars */
.scroll { overflow-y: auto; scrollbar-width: thin; scrollbar-color: hsl(var(--border)) transparent; }
.scroll::-webkit-scrollbar { width: 9px; height: 9px; }
.scroll::-webkit-scrollbar-thumb { background: hsl(var(--border)); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
.scroll::-webkit-scrollbar-thumb:hover { background: hsl(var(--muted-foreground) / .5); background-clip: padding-box; }

.tip { position: relative; }

@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.ai-shimmer {
  background: linear-gradient(90deg, hsl(var(--ai)/.0) 0%, hsl(var(--ai)/.18) 50%, hsl(var(--ai)/.0) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}
@keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.live-dot { animation: pulse-dot 1.6s ease-in-out infinite; }

@keyframes fade-up { from { transform: translateY(8px); } to { transform: none; } }
.fade-up {
  animation: fade-up .26s cubic-bezier(0.22,1,0.36,1) both;
}