@import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap");
@import "tailwindcss";

@theme {
  --font-sans: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --font-serif: "Instrument Serif", ui-serif, Georgia, "Times New Roman", serif;

  --color-background: #0c0d0b;
  --color-foreground: #f0eee8;
  --color-card: #151613;
  --color-card-foreground: #f0eee8;
  --color-primary: #d5d8d2;
  --color-primary-foreground: #0c0d0b;
  --color-secondary: #1c1d19;
  --color-secondary-foreground: #f0eee8;
  --color-muted: #1c1d19;
  --color-muted-foreground: #8e8c84;
  --color-accent: #1c1d19;
  --color-accent-foreground: #f0eee8;
  --color-border: rgb(240 238 232 / 0.1);
  --color-input: rgb(240 238 232 / 0.1);
  --color-ring: #d5d8d2;
  --color-destructive: #b4554a;
  --color-popover: #151613;
  --color-popover-foreground: #f0eee8;

  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-2xl: 2rem;
}

@layer base {
  html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: var(--color-background);
    color: var(--color-foreground);
  }

  body {
    background: var(--color-background);
    color: var(--color-foreground);
    font-family: var(--font-sans);
  }

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

  h1,
  h2,
  h3 {
    text-wrap: balance;
  }

  p {
    text-wrap: pretty;
  }
}

.die-face {
  box-shadow: 0 0 0 1px rgb(240 238 232 / 0.1), 0 8px 24px rgb(0 0 0 / 0.28);
}

.coin-scene {
  perspective: 480px;
}

.coin {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.coin.is-heads {
  transform: rotateY(0deg);
}

.coin.is-tails {
  transform: rotateY(180deg);
}

.coin-side {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  backface-visibility: hidden;
  box-shadow: 0 0 0 1px rgb(240 238 232 / 0.12);
}

.coin-heads {
  background: var(--color-primary);
  color: var(--color-primary-foreground);
}

.coin-tails {
  background: var(--color-secondary);
  color: var(--color-foreground);
  transform: rotateY(180deg);
}

.token-pop {
  transform-origin: center;
}

.token-roll {
  animation: token-roll 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes token-roll {
  0% {
    transform: rotate(-8deg) translateY(0);
  }
  35% {
    transform: rotate(10deg) translateY(-6px);
  }
  70% {
    transform: rotate(-4deg) translateY(-2px);
  }
  100% {
    transform: rotate(0deg) translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .token-roll,
  .coin {
    animation: none !important;
    transition: none !important;
  }
}