@import 'tailwindcss';

/* Class-based dark mode: toggling `.dark` on <html> swaps the token values below. */
@custom-variant dark (&:where(.dark, .dark *));

/* ---- Semantic design tokens (light defaults) ---- */
:root {
  --app-surface: #f5f2ec; /* page background */
  --app-panel: #fffdf9; /* cards / panels */
  --app-elevated: #ece6da; /* raised controls */
  --app-line: #d8cfbe; /* borders */
  --app-ink: #232018; /* primary text */
  --app-muted: #6b6457; /* secondary text */
  --app-accent: #9a6b1f; /* brand (deep gold) */
  --app-accent-soft: #c79a4a;
  --app-accent-ink: #fffdf9; /* text on accent */
  --app-danger: #b3261e;
  --app-success: #2e7d32;
  --app-warning: #b06f00;
  --app-info: #1565c0;
}

.dark {
  --app-surface: #0f0f17;
  --app-panel: #181826;
  --app-elevated: #21212f;
  --app-line: #2e2e40;
  --app-ink: #e9e7ef;
  --app-muted: #9a98ab;
  --app-accent: #d4af37; /* gold */
  --app-accent-soft: #b08d2e;
  --app-accent-ink: #15151f;
  --app-danger: #ef5350;
  --app-success: #66bb6a;
  --app-warning: #ffb74d;
  --app-info: #64b5f6;
}

/* Expose tokens as Tailwind color utilities: bg-surface, text-ink, border-line, etc. */
@theme inline {
  --color-surface: var(--app-surface);
  --color-panel: var(--app-panel);
  --color-elevated: var(--app-elevated);
  --color-line: var(--app-line);
  --color-ink: var(--app-ink);
  --color-muted: var(--app-muted);
  --color-accent: var(--app-accent);
  --color-accent-soft: var(--app-accent-soft);
  --color-accent-ink: var(--app-accent-ink);
  --color-danger: var(--app-danger);
  --color-success: var(--app-success);
  --color-warning: var(--app-warning);
  --color-info: var(--app-info);

  --font-display: 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
}

html,
body,
#root {
  height: 100%;
}

body {
  margin: 0;
  background: var(--app-surface);
  color: var(--app-ink);
  font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

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

/* Thin themed scrollbars */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--app-line) transparent;
}

/* Dice roll animations */
@keyframes dice-tumble {
  0% {
    transform: scale(0.7) rotate(-12deg);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.12) rotate(8deg);
  }
  75% {
    transform: scale(0.96) rotate(-3deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}
.animate-dice-settle {
  animation: dice-tumble 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes dice-shake {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(-2px, 1px) rotate(-3deg);
  }
  50% {
    transform: translate(2px, -1px) rotate(3deg);
  }
  75% {
    transform: translate(-1px, 2px) rotate(-2deg);
  }
}
.animate-dice-rolling {
  animation: dice-shake 0.12s linear infinite;
}
