/* Import Radix UI color system */
@import '../Color/colors.css';

/* Base card styles */
.card {
  display: flex;
  flex-direction: column;
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
}

/* Sizes */
.size-1 {
  padding: 1rem;
  gap: 0.75rem;
  --card-padding: 1rem;
}

.size-2 {
  padding: 1.25rem;
  gap: 1rem;
  --card-padding: 1.25rem;
}

.size-3 {
  padding: 1.5rem;
  gap: 1.25rem;
  --card-padding: 1.5rem;
}

.size-4 {
  padding: 2rem;
  gap: 1.5rem;
  --card-padding: 2rem;
}

.size-5 {
  padding: 2.5rem;
  gap: 2rem;
  --card-padding: 2.5rem;
}

/* Variants - Surface */
.variant-surface {
  background-color: var(--radix-color-background);
  border: 1px solid var(--radix-color-border);
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* Variants - Classic */
.variant-classic {
  background: linear-gradient(to bottom, var(--radix-color-background), var(--radix-gray-2));
  border: 1px solid var(--radix-gray-6);
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05), inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
}

/* Variants - Ghost */
.variant-ghost {
  background-color: transparent;
  border: none;
  border-radius: 0.5rem;
}

/* Interactive states for asChild (when used as link/button) */
.card[href],
.card[role="button"],
.card[role="link"] {
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.card[href]:hover,
.card[role="button"]:hover,
.card[role="link"]:hover {
  text-decoration: none;
}

.variant-surface[href]:hover,
.variant-surface[role="button"]:hover,
.variant-surface[role="link"]:hover {
  background-color: var(--radix-gray-1);
  border-color: var(--radix-gray-7);
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
}

.variant-classic[href]:hover,
.variant-classic[role="button"]:hover,
.variant-classic[role="link"]:hover {
  background: linear-gradient(to bottom, var(--radix-gray-2), var(--radix-gray-3));
  border-color: var(--radix-gray-7);
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08), inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
}

.variant-ghost[href]:hover,
.variant-ghost[role="button"]:hover,
.variant-ghost[role="link"]:hover {
  background-color: var(--radix-gray-2);
}

.variant-surface[href]:focus-visible,
.variant-surface[role="button"]:focus-visible,
.variant-surface[role="link"]:focus-visible,
.variant-classic[href]:focus-visible,
.variant-classic[role="button"]:focus-visible,
.variant-classic[role="link"]:focus-visible,
.variant-ghost[href]:focus-visible,
.variant-ghost[role="button"]:focus-visible,
.variant-ghost[role="link"]:focus-visible {
  outline: 2px solid var(--radix-color-primary);
  outline-offset: 2px;
}

.variant-surface[href]:active,
.variant-surface[role="button"]:active,
.variant-surface[role="link"]:active {
  background-color: var(--radix-gray-2);
  box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.variant-classic[href]:active,
.variant-classic[role="button"]:active,
.variant-classic[role="link"]:active {
  background: linear-gradient(to bottom, var(--radix-gray-3), var(--radix-gray-4));
  box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.1);
}

.variant-ghost[href]:active,
.variant-ghost[role="button"]:active,
.variant-ghost[role="link"]:active {
  background-color: var(--radix-gray-3);
}

/* Dark mode support */
[data-theme='dark'] .variant-surface {
  background-color: var(--radix-gray-3);
  border-color: var(--radix-gray-6);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
}

[data-theme='dark'] .variant-surface[href]:hover,
[data-theme='dark'] .variant-surface[role="button"]:hover,
[data-theme='dark'] .variant-surface[role="link"]:hover {
  background-color: var(--radix-gray-4);
  border-color: var(--radix-gray-7);
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3);
}

[data-theme='dark'] .variant-classic {
  background: linear-gradient(to bottom, var(--radix-gray-3), var(--radix-gray-2));
  border-color: var(--radix-gray-6);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
}

[data-theme='dark'] .variant-classic[href]:hover,
[data-theme='dark'] .variant-classic[role="button"]:hover,
[data-theme='dark'] .variant-classic[role="link"]:hover {
  background: linear-gradient(to bottom, var(--radix-gray-5), var(--radix-gray-3));
  border-color: var(--radix-gray-7);
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3), inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
}

[data-theme='dark'] .variant-ghost[href]:hover,
[data-theme='dark'] .variant-ghost[role="button"]:hover,
[data-theme='dark'] .variant-ghost[role="link"]:hover {
  background-color: var(--radix-gray-4);
}

[data-theme='dark'] .variant-surface[href]:active,
[data-theme='dark'] .variant-surface[role="button"]:active,
[data-theme='dark'] .variant-surface[role="link"]:active {
  background-color: var(--radix-gray-4);
}

[data-theme='dark'] .variant-classic[href]:active,
[data-theme='dark'] .variant-classic[role="button"]:active,
[data-theme='dark'] .variant-classic[role="link"]:active {
  background: linear-gradient(to bottom, var(--radix-gray-5), var(--radix-gray-4));
}

[data-theme='dark'] .variant-ghost[href]:active,
[data-theme='dark'] .variant-ghost[role="button"]:active,
[data-theme='dark'] .variant-ghost[role="link"]:active {
  background-color: var(--radix-gray-5);
}

