@theme {
  --default-transition-duration: 75ms;
  --font-sans:
    "Outfit Variable", ui-sans-serif, system-ui, -apple-system, "Noto Sans CJK SC", "PingFang SC", "Hiragino Sans",
    "Microsoft YaHei", sans-serif;
  --font-display: "Bricolage Grotesque Variable", "Outfit Variable", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Fira Code", "Noto Sans Mono CJK SC", monospace;

  /* Warm amethyst accent palette */
  --color-accent-50: #faf7ff;
  --color-accent-100: #f1ecfe;
  --color-accent-200: #e2d7fe;
  --color-accent-300: #ccb4fb;
  --color-accent-400: #b48ef5;
  --color-accent-500: #9d6ee8;
  --color-accent-600: #8854d4;
  --color-accent-700: #7241b8;
  --color-accent-800: #5e3497;
  --color-accent-900: #4d2a7c;

  /* Warm zinc overrides — subtle warm tinting per .impeccable.md */
  --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;

  /* Callout kind labels — OKLCH, low chroma for astigmatism comfort,
     hues orbiting the amethyst accent (290) so they feel related. */
  --color-callout-info: oklch(0.82 0.06 265);
  --color-callout-tip: oklch(0.89 0.05 295);
  --color-callout-warning: oklch(0.82 0.07 62);

  /* Canvas (lifted dark body background — warmed) */
  --color-canvas: #221f21;

  /* Floating overlay surface (toolbars, popovers) — sits above every editor surface via shadow, not value */
  --color-overlay-surface: var(--color-zinc-700);

  /* Animations */
  --animate-fade-in: fade-in 0.4s ease-out both;
  --animate-slide-up: slide-up 0.35s ease-out both;
  --animate-scale-fade: scale-fade 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
  --animate-menu: fade-in 0.15s ease-out both;
  --animate-shimmer: shimmer 1.5s ease-in-out infinite;
  --animate-caret-blink: caret-blink 1.1s steps(2, start) infinite;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

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

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

@keyframes caret-blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/* Shared scrollbar styling for app and published Sites surfaces. */
@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);
  }
}

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