@import "tailwindcss";
@import "@nuxt/ui";

@import "../../../../packages/editor/src/assets/style.css";
@source "../../../../packages/editor/src/components/**/*.vue";

@theme {
  --font-sans: "Lora", serif;
}

@theme static {
  --color-clay-50: #fdf6f1;
  --color-clay-100: #fae8d8;
  --color-clay-200: #f5cfb0;
  --color-clay-300: #ecae7c;
  --color-clay-400: #e08347;
  --color-clay-500: #c9621f;
  --color-clay-600: #a84e18;
  --color-clay-700: #873c14;
  --color-clay-800: #6d3112;
  --color-clay-900: #592a12;
  --color-clay-950: #301309;
}

:root {
  --ui-radius: 0.375rem;
}

html { background-color: oklch(21.6% 0.006 56.043); }

/* Block highlight animation — gentle pulse that fades away */
.block-highlight {
  animation: block-flash 1.2s ease-out forwards;
}

@keyframes block-flash {
  0%   { background-color: transparent; }
  20%  { background-color: color-mix(in srgb, var(--ui-primary) 12%, transparent); }
  100% { background-color: transparent; }
}
