@import "tailwindcss";

/**
 * Keyrune set symbol font
 * https://github.com/andrewgioia/keyrune
 * Font licensed under SIL OFL 1.1
 */
@font-face {
	font-family: "Keyrune";
	src: url("/fonts/keyrune/keyrune.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@theme {
	/* MTG rarity colors (from Keyrune) */
	--color-rarity-common: #1a1718;
	--color-rarity-uncommon: #707883;
	--color-rarity-rare: #a58e4a;
	--color-rarity-mythic: #bf4427;
	--color-rarity-timeshifted: #652978;
}

@custom-variant dark (&:where(.dark, .dark *));

html {
  @apply bg-white dark:bg-slate-900;
}

body {
  @apply m-0 bg-white dark:bg-slate-900;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}

/* Dark mode scrollbar styling */
.dark {
  /* Firefox */
  scrollbar-color: var(--color-gray-600) var(--color-gray-800);
}

.dark ::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

.dark ::-webkit-scrollbar-track {
  background: var(--color-gray-800);
}

.dark ::-webkit-scrollbar-thumb {
  background: var(--color-gray-600);
  border-radius: 6px;
  border: 2px solid var(--color-gray-800);
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: var(--color-gray-500);
}

/* Shimmer animation for loading indicator */
@keyframes shimmer {
  0%, 100% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(100%);
  }
}

/* ProseMirror editor styles */
.prosemirror-editor .ProseMirror {
  outline: none;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.prosemirror-editor .ProseMirror p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  color: var(--color-gray-400);
  pointer-events: none;
  height: 0;
}

.dark .prosemirror-editor .ProseMirror p.is-editor-empty:first-child::before {
  color: var(--color-gray-500);
}

/* Empty editor placeholder using data attribute */
.prosemirror-editor .ProseMirror:has(> p:only-child:empty)::before {
  content: attr(data-placeholder);
  color: var(--color-gray-400);
  pointer-events: none;
  position: absolute;
}

.dark .prosemirror-editor .ProseMirror:has(> p:only-child:empty)::before {
  color: var(--color-gray-500);
}