/**
 * File Purpose: Optional card-chrome theme tokens for the tarot kit stub.
 * Primary Functions/Classes: .tarot-kit custom properties (cloth, gold, cream).
 * Inputs and Outputs (I/O): CSS variables only — pair with tarot.js THEME map.
 * MIT License — Luke Steuber.
 */

.tarot-kit {
  --tarot-void: #07040c;
  --tarot-cloth: #120a18;
  --tarot-gold: #d4af6a;
  --tarot-gold-dim: #8a7040;
  --tarot-cream: #f4e8d0;
  --tarot-ink: #1a1020;
  --tarot-rose: #c45c6a;
  --tarot-focus: #e8c88a;
  --tarot-parchment: #e9dfc4;
  --tarot-arcana-ink: #193637;
  --tarot-arcana-gold: #e6bd67;
  --tarot-card-radius: 12px;
  --tarot-card-border: 3px solid var(--tarot-cream);
  --tarot-card-shadow: 0 8px 32px rgba(0, 0, 0, 0.65);
  --tarot-aspect: 5 / 7;
}

.tarot-kit .card {
  --r: 0deg;
  --x: 0px;
  --y: 0px;
  aspect-ratio: var(--tarot-aspect);
  border-radius: var(--tarot-card-radius);
  border: var(--tarot-card-border);
  box-shadow: var(--tarot-card-shadow);
  transform: translate(-50%, -50%) rotate(var(--r)) translate(var(--x), var(--y));
}

@media (prefers-reduced-motion: reduce) {
  .tarot-kit .card {
    transition: none;
  }
}