/**
 * Design System Utilities
 * 
 * Semantic component primitives using the consolidated color system.
 * Layout, spacing, typography utilities come from Tailwind.
 */

@layer utilities {
  /* ===== CARD ===== */
  .cp-card {
    background: var(--card);
    color: var(--card-foreground);
    border: 1px solid color-mix(in oklch, var(--border) 60%, transparent);
    border-radius: var(--cp-card-radius);
    box-shadow: var(--cp-card-shadow);
    padding: var(--cp-card-padding);
    transition:
      box-shadow 0.2s ease,
      border-color 0.2s ease;
  }

  .cp-card:hover {
    box-shadow: var(--cp-card-shadow-lg);
    border-color: var(--border);
  }

  .cp-card-sm {
    padding: var(--cp-card-padding-sm);
  }

  .cp-card-lg {
    border-radius: var(--cp-card-radius-lg);
    box-shadow: var(--cp-card-shadow-lg);
  }

  .cp-card-interactive {
    cursor: pointer;
  }

  .cp-card-interactive:hover {
    transform: translateY(-1px);
  }

  .cp-card-interactive:active {
    transform: translateY(0);
  }

  /* ===== BADGE ===== */
  .cp-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--cp-space-1);
    border-radius: var(--cp-badge-radius);
    padding: var(--cp-badge-padding-y) var(--cp-badge-padding-x);
    font-size: var(--cp-badge-font-size);
    font-weight: var(--cp-badge-font-weight);
    line-height: 1;
    white-space: nowrap;
  }

  /* Badge variants - using 5 semantic colors */
  .cp-badge-primary {
    background: var(--primary);
    color: var(--primary-foreground);
  }

  .cp-badge-secondary {
    background: var(--secondary);
    color: var(--secondary-foreground);
  }

  .cp-badge-success {
    background: var(--success);
    color: var(--success-foreground);
  }

  .cp-badge-info {
    background: var(--info);
    color: var(--info-foreground);
  }

  .cp-badge-warning {
    background: var(--warning);
    color: var(--warning-foreground);
  }

  .cp-badge-danger {
    background: var(--danger);
    color: var(--danger-foreground);
  }

  .cp-badge-neutral {
    background: var(--neutral);
    color: var(--neutral-foreground);
  }

  /* Soft badge variants (light bg, dark text) */
  .cp-badge-soft-success {
    background: var(--success-soft);
    color: var(--success);
  }

  .cp-badge-soft-info {
    background: var(--info-soft);
    color: var(--info);
  }

  .cp-badge-soft-warning {
    background: var(--warning-soft);
    color: var(--warning);
  }

  .cp-badge-soft-danger {
    background: var(--danger-soft);
    color: var(--danger);
  }

  .cp-badge-soft-neutral {
    background: var(--neutral-soft);
    color: var(--neutral);
  }

  .cp-badge-outline {
    background: transparent;
    border: 1px solid currentColor;
  }

  /* ===== SKELETON (Loading state) ===== */
  .cp-skeleton {
    background: var(--cp-skeleton-base);
    border-radius: var(--cp-radius-md);
    position: relative;
    overflow: hidden;
  }

  .cp-skeleton::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, var(--cp-skeleton-shimmer), transparent);
    animation: cp-skeleton-shimmer 2s infinite;
  }

  @keyframes cp-skeleton-shimmer {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(100%);
    }
  }

  /* ===== FOCUS RING ===== */
  .cp-focus-ring {
    outline: var(--cp-focus-ring);
    outline-offset: var(--cp-focus-ring-offset);
  }

  .cp-focus-ring-visible:focus-visible {
    outline: var(--cp-focus-ring);
    outline-offset: var(--cp-focus-ring-offset);
  }
}