Assist_Design/apps/portal/src/styles/utilities.css

/**
 * Minimal Design System Utilities
 * 
 * This file contains only semantic component primitives.
 * Layout, spacing, typography, and responsive utilities come from Tailwind.
 * Design tokens (colors, spacing, etc.) are defined in tokens.css and globals.css.
 */

@layer utilities {
  /* ===== CARD ===== */
  .cp-card {
    background: var(--card);
    color: var(--card-foreground);
    border: 1px solid var(--border);
    border-radius: var(--cp-card-radius);
    box-shadow: var(--cp-card-shadow);
    padding: var(--cp-card-padding);
  }

  .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);
  }

  /* ===== 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 */
  .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-warning {
    background: var(--warning);
    color: var(--warning-foreground);
  }

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

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

  /* Soft badge variants */
  .cp-badge-soft-success {
    background: var(--success-soft);
    color: var(--success);
  }

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

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

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

  .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);
  }
}