/* Base selectable card styles (common across all themes) */
.selectable-card {
  position: relative;
  transition: all 0.2s ease-in-out;
  border-width: 1px;
  border-style: solid;
  border-radius: 0.5rem; /* equiv to rounded-lg */
}

/* Default (unselected) state */
.selectable-card--default {
  /* Neutral borders based on theme */
  border-color: var(--yang-gray-200);
  background-color: var(--yang-white);
}

.dark .selectable-card--default {
  border-color: var(--yang-gray-700);
  background-color: var(--yang-black);
}

/* Yang theme selection states */
.yang .selectable-card--selected {
  border-color: var(--yang-primary);
  background-color: rgba(var(--yang-primary-rgb), 0.1); /* Adjusted for opacity */
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.yang.dark .selectable-card--selected {
  border-color: var(--yang-primary-light);
  background-color: rgba(var(--yang-primary-dark-rgb), 0.2); /* Adjusted for opacity */
  box-shadow: var(--shadow-md);
}

/* Yin theme selection states */
.yin .selectable-card--selected {
  border-color: var(--yin-primary);
  background-color: rgba(var(--yin-primary-rgb), 0.1); /* Adjusted for opacity */
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.yin.dark .selectable-card--selected {
  border-color: var(--yin-primary-light);
  background-color: rgba(var(--yin-primary-dark-rgb), 0.2); /* Adjusted for opacity */
  box-shadow: var(--shadow-md);
}

/* Hover states for unselected cards */
.selectable-card--default:hover:not(.selectable-card--disabled) {
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.yang .selectable-card--default:hover:not(.selectable-card--disabled) {
  border-color: var(--yang-gray-300);
}

.dark .yang .selectable-card--default:hover:not(.selectable-card--disabled) {
  border-color: var(--yang-gray-600);
}

.yin .selectable-card--default:hover:not(.selectable-card--disabled) {
  border-color: var(--yin-gray-300);
}

.dark .yin .selectable-card--default:hover:not(.selectable-card--disabled) {
  border-color: var(--yin-gray-600);
}

/* Focus states for accessibility */
.selectable-card:focus-visible {
  outline: none;
}

.yang .selectable-card:focus-visible {
  box-shadow: 0 0 0 2px var(--yang-primary);
  opacity: 0.5;
}

.yin .selectable-card:focus-visible {
  box-shadow: 0 0 0 2px var(--yin-primary);
  opacity: 0.5;
}

/* Disabled state */
.selectable-card--disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Card inner padding */
.selectable-card-content {
  padding: 1.25rem; /* p-5 */
}

/* Selection indicator styles */
.selectable-card-indicator {
  position: absolute;
  top: 0.5rem; /* top-2 */
  right: 0.5rem; /* right-2 */
}

.yang .selectable-card-indicator {
  color: var(--yang-primary);
}

.dark .yang .selectable-card-indicator {
  color: var(--yang-primary-light);
}

.yin .selectable-card-indicator {
  color: var(--yin-primary);
}

.dark .yin .selectable-card-indicator {
  color: var(--yin-primary-light);
}