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

@layer base {
  :root {
    color-scheme: light;
  }

  html.dark {
    color-scheme: dark;
  }

  html,
  body,
  #root {
    height: 100%;
  }

  body {
    @apply bg-zinc-50 text-zinc-900 antialiased dark:bg-zinc-950 dark:text-zinc-100;
    font-family: theme('fontFamily.sans');
  }

  /* Focus visible homogene et lisible sur les deux themes. */
  :focus-visible {
    @apply outline-none ring-2 ring-indigo-500 ring-offset-2 ring-offset-white dark:ring-offset-zinc-950;
  }
}

@layer components {
  .panel {
    @apply rounded-xl border border-zinc-200 bg-white shadow-panel dark:border-zinc-800 dark:bg-zinc-900;
  }

  .field-label {
    @apply mb-1 block text-xs font-medium uppercase tracking-wide text-zinc-500 dark:text-zinc-400;
  }

  .field-input {
    @apply w-full rounded-lg border border-zinc-200 bg-white px-3 py-2 text-sm text-zinc-900 placeholder:text-zinc-400 focus:border-indigo-400 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-100 dark:placeholder:text-zinc-500;
  }
}

/* ---------------------------------------------------------------- Canvas */

/* L'attribution React Flow reste visible a l'ecran ; elle est retiree
   uniquement des exports et de l'impression. */
.openmind-exporting .react-flow__attribution {
  display: none;
}

.openmind-canvas .react-flow__handle {
  width: 9px;
  height: 9px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  background: rgba(99, 102, 241, 0.9);
  opacity: 0;
  transition: opacity 120ms ease-out;
}

.openmind-canvas .react-flow__node:hover .react-flow__handle,
.openmind-canvas .react-flow__node.selected .react-flow__handle {
  opacity: 1;
}

.openmind-canvas .react-flow__node.selected .mind-node {
  box-shadow: 0 0 0 2px #6366f1, 0 0 0 5px rgba(99, 102, 241, 0.22);
}

.mind-node {
  transition:
    box-shadow 120ms ease-out,
    transform 120ms ease-out;
}

.mind-node--search-hit {
  animation: mind-node-pulse 1.6s ease-out 2;
}

@keyframes mind-node-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
  }
  35% {
    box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.55);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mind-node,
  .mind-node--search-hit {
    transition: none;
    animation: none;
  }
}