// Card component - Shadcn inspired elevation and structure

/**
 * @section Card Base
 */

/** @public Base card with subtle shadow and border */
.card {
  border-radius: var(--radius-lg);
  border: 1px solid hsl(var(--border));
  background-color: hsl(var(--card));
  color: hsl(var(--card-foreground));
  box-shadow: var(--shadow-sm);
  padding: var(--spacing-6);
}

/** @public Card header section with spacing */
.card-header {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-6);
}

/** @public Card title - large semibold heading */
.card-title {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  margin: 0;
}

/** @public Card description - muted text below title */
.card-description {
  font-size: var(--text-sm);
  color: hsl(var(--muted-foreground));
  margin: 0;
}

/** @public Card content section - main body */
.card-content {
  // Content inherits card padding
  & + .card-footer {
    margin-top: var(--spacing-6);
  }
}

/** @public Card footer section - typically for actions/buttons */
.card-footer {
  display: flex;
  align-items: center;
  margin-top: var(--spacing-6);
}

/**
 * @section Card Variants
 */

/** @public Elevated card with enhanced shadow and hover effect */
.card-elevated {
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--transition-base);

  &:hover {
    box-shadow: var(--shadow-lg);
  }
}

/** @public Interactive card - clickable with lift effect */
.card-interactive {
  cursor: pointer;
  transition: all var(--transition-base);

  &:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }
}

/** @public Card with 2px border and no shadow */
.card-bordered {
  border: 2px solid hsl(var(--border));
  box-shadow: none;
}

/** @public Transparent card with no border or shadow */
.card-ghost {
  border: none;
  box-shadow: none;
  background-color: transparent;
}

/** @public Card with muted background */
.card-muted {
  background-color: hsl(var(--muted));
  // color: hsl(var(--muted-foreground));
  border-color: hsl(var(--muted));
}

/**
 * @section Card Modifiers
 */

/** @public Remove card padding (adds to children instead) */
.card-no-padding {
  padding: 0;

  // Add padding to direct children if needed
  > .card-header,
  > .card-content,
  > .card-footer {
    padding: var(--spacing-6);
  }

  // Remove top padding from content after header
  > .card-header + .card-content {
    padding-top: 0;
  }

  // Remove top padding from footer after content
  > .card-content + .card-footer {
    padding-top: 0;
  }
}