@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Outfit:wght@400;500;600&display=swap");
@import "tailwindcss";

@theme {
  --color-bg: #121110;
  --color-bg-elevated: #1c1a17;
  --color-bg-subtle: #26221e;
  --color-fg: #ece6dc;
  --color-muted: #a3988a;
  --color-subtle: #7a7168;
  --color-border: #3a342e;
  --color-accent: #d9d1c5;
  --color-accent-fg: #121110;
  --color-paper: #ece6dc;
  --color-paper-2: #e2d8c8;
  --color-ink: #1a1816;
  --color-stone: #7a6d62;
  --color-danger: #b2554a;
  --font-sans: "Outfit", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Fraunces", "Times New Roman", serif;
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --shadow-card: 0 0 0 1px color-mix(in oklab, var(--color-fg) 10%, transparent);
}

@layer base {
  html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  html,
  body,
  #root {
    min-height: 100%;
    background: var(--color-bg);
    color: var(--color-fg);
  }

  body {
    font-family: var(--font-sans);
    line-height: 1.5;
  }

  h1,
  h2,
  h3 {
    text-wrap: balance;
    font-family: var(--font-display);
    letter-spacing: -0.03em;
    line-height: 1.15;
  }

  p {
    text-wrap: pretty;
  }

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

  img {
    outline: 1px solid color-mix(in oklab, var(--color-ink) 10%, transparent);
    outline-offset: -1px;
  }
}

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

.world-canvas canvas {
  touch-action: none;
  display: block;
}

.lib-tag {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-fg);
  background: color-mix(in oklab, var(--color-bg) 72%, transparent);
  border: 1px solid color-mix(in oklab, var(--color-fg) 16%, transparent);
  padding: 6px 10px;
  border-radius: 999px;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}