@import "tailwindcss";

@theme {
  --default-transition-duration: 75ms;

  --font-sans: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-display: "Fraunces", ui-serif, Georgia, serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Fira Code", monospace;

  /* Warm zinc overrides -- see frontend-spec.md §4 */
  --color-zinc-50: #fafaf9;
  --color-zinc-100: #f5f4f4;
  --color-zinc-200: #e5e4e5;
  --color-zinc-300: #d6d4d7;
  --color-zinc-400: #a3a1a8;
  --color-zinc-500: #747178;
  --color-zinc-600: #555259;
  --color-zinc-700: #423f42;
  --color-zinc-800: #2a2729;
  --color-zinc-900: #1b181a;
  --color-zinc-950: #0c090b;

  /* dab accent: coral-magenta, hue ~325° */
  --color-accent-50: #fdf2f8;
  --color-accent-100: #fce7f3;
  --color-accent-200: #fbcfe8;
  --color-accent-300: #f9a8d4;
  --color-accent-400: #f06da6;
  --color-accent-500: #db3a8b;
  --color-accent-600: #b8226e;
  --color-accent-700: #941b58;
  --color-accent-800: #76174a;
  --color-accent-900: #5b143b;

  /* Lifted warm canvas background */
  --color-canvas: #221f21;

  --animate-scale-fade: scale-fade 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
  --animate-slide-up: slide-up 0.35s ease-out both;
  --animate-shimmer: shimmer 1.5s ease-in-out infinite;
}

@keyframes scale-fade {
  from {
    opacity: 0;
    transform: scale(0.96);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

  to {
    background-position: 200% 0;
  }
}

html {
  color-scheme: dark;
}

html,
body {
  min-height: 100vh;
}

body {
  @apply bg-canvas text-zinc-100 antialiased;
  font-weight: 450;
}

#root {
  min-height: 100vh;
}

button:not(:disabled),
select,
summary,
[role="button"] {
  cursor: pointer;
}

::selection {
  @apply bg-accent-500/[0.28] text-accent-50;
}

@layer base {
  html,
  body,
  .overflow-y-auto,
  .overflow-auto,
  .tiptap pre,
  .tableWrapper {
    scrollbar-width: thin;
    scrollbar-color: var(--color-zinc-700) transparent;
  }

  html::-webkit-scrollbar,
  body::-webkit-scrollbar,
  .overflow-y-auto::-webkit-scrollbar,
  .overflow-auto::-webkit-scrollbar,
  .tiptap pre::-webkit-scrollbar,
  .tableWrapper::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  html::-webkit-scrollbar-track,
  body::-webkit-scrollbar-track,
  .overflow-y-auto::-webkit-scrollbar-track,
  .overflow-auto::-webkit-scrollbar-track,
  .tiptap pre::-webkit-scrollbar-track,
  .tableWrapper::-webkit-scrollbar-track {
    background: transparent;
  }

  html::-webkit-scrollbar-thumb,
  body::-webkit-scrollbar-thumb,
  .overflow-y-auto::-webkit-scrollbar-thumb,
  .overflow-auto::-webkit-scrollbar-thumb,
  .tiptap pre::-webkit-scrollbar-thumb,
  .tableWrapper::-webkit-scrollbar-thumb {
    background-color: var(--color-zinc-700);
    border-radius: 3px;
  }

  html::-webkit-scrollbar-thumb:hover,
  body::-webkit-scrollbar-thumb:hover,
  .overflow-y-auto::-webkit-scrollbar-thumb:hover,
  .overflow-auto::-webkit-scrollbar-thumb:hover,
  .tiptap pre::-webkit-scrollbar-thumb:hover,
  .tableWrapper::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-zinc-600);
  }
}

*:focus-visible {
  @apply outline-none ring-2 ring-accent-500/50 ring-offset-2 ring-offset-canvas;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}