frontend/src/styles/saap-design-system.css

/**
 * SAAP Design System v1.0 - Foundation CSS
 * satware AI Autonomous Agent Platform
 * Based on Refactoring UI Principles + Material Design 3
 */

/* ========================================
   FONT IMPORTS - MUST BE FIRST
======================================== */

/* Inter Font Import */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

/* ========================================
   SAAP FOUNDATION STYLES
======================================== */

@layer base {
  /* Root Variables - Design Tokens */
  :root {
    /* SAAP Color System */
    --saap-primary: #2563eb;
    --saap-primary-hover: #1e3a8a;
    --saap-success: #10b981;
    --saap-warning: #f59e0b;
    --saap-error: #ef4444;
    --saap-info: #3b82f6;
    
    /* Agent Colors */
    --saap-jane: #8b5cf6;    /* Purple - Lead Coordinator */
    --saap-john: #14b8a6;    /* Teal - Developer */
    --saap-lara: #ec4899;    /* Pink - Medical Expert */
    --saap-justus: #f59e0b;  /* Gold - Legal Expert */
    
    /* Typography */
    --saap-font-family: 'Inter', system-ui, sans-serif;
    --saap-font-mono: 'Fira Code', 'SF Mono', Monaco, monospace;
    
    /* Spacing Base Unit */
    --saap-space-unit: 0.25rem; /* 4px */
    
    /* Border Radius */
    --saap-radius: 0.5rem;     /* 8px */
    --saap-radius-lg: 0.75rem; /* 12px */
    --saap-radius-xl: 1rem;    /* 16px */
    
    /* Shadows */
    --saap-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --saap-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
    --saap-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);
    --saap-shadow-primary: 0 4px 12px rgba(37, 99, 235, 0.25);
    
    /* Transitions */
    --saap-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  /* Base HTML Styling */
  html {
    font-family: var(--saap-font-family);
    font-size: 16px;
    line-height: 1.5;
    color: theme('colors.saap.neutral.700');
    background-color: theme('colors.saap.neutral.50');
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  body {
    font-family: inherit;
    margin: 0;
    padding: 0;
  }
  
  /* Accessibility Focus Styles */
  *:focus-visible {
    outline: 2px solid theme('colors.saap.primary.400');
    outline-offset: 2px;
  }
}

/* ========================================
   SAAP COMPONENT SYSTEM
======================================== */

@layer components {
  
  /* Container System */
  .saap-container {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }
  
  .saap-container-narrow {
    @apply max-w-4xl mx-auto px-4 sm:px-6;
  }
  
  /* ========================================
     BUTTON COMPONENTS
  ======================================== */
  
  /* Primary Button - Highest Priority Actions */
  .saap-btn-primary {
    @apply inline-flex items-center justify-center px-6 py-3;
    @apply text-base font-semibold text-white;
    @apply bg-saap-primary-600 hover:bg-saap-primary-800;
    @apply rounded-saap shadow-saap-primary hover:shadow-saap-primary-lg;
    @apply transition-all duration-300 ease-out;
    @apply focus:outline-none focus:ring-2 focus:ring-saap-primary-400 focus:ring-offset-2;
    @apply disabled:opacity-50 disabled:cursor-not-allowed;
    @apply transform hover:-translate-y-0.5 active:translate-y-0;
  }
  
  /* Secondary Button - Secondary Actions */
  .saap-btn-secondary {
    @apply inline-flex items-center justify-center px-6 py-3;
    @apply text-base font-medium text-saap-primary-600;
    @apply bg-white border-2 border-saap-primary-200;
    @apply hover:bg-saap-primary-50 hover:border-saap-primary-300;
    @apply rounded-saap shadow-saap-sm hover:shadow-saap-md;
    @apply transition-all duration-300 ease-out;
    @apply focus:outline-none focus:ring-2 focus:ring-saap-primary-400 focus:ring-offset-2;
  }
  
  /* Ghost Button - Minimal Actions */
  .saap-btn-ghost {
    @apply inline-flex items-center justify-center px-4 py-2;
    @apply text-sm font-medium text-saap-neutral-700;
    @apply bg-transparent hover:bg-saap-neutral-100;
    @apply rounded-saap transition-colors duration-200;
    @apply focus:outline-none focus:ring-2 focus:ring-saap-primary-400 focus:ring-offset-1;
  }
  
  /* Danger Button - Destructive Actions */
  .saap-btn-danger {
    @apply inline-flex items-center justify-center px-6 py-3;
    @apply text-base font-semibold text-white;
    @apply bg-saap-error hover:bg-red-700;
    @apply rounded-saap shadow-sm hover:shadow-md;
    @apply transition-all duration-300 ease-out;
    @apply focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-offset-2;
  }
  
  /* Button Sizes */
  .saap-btn-sm {
    @apply px-4 py-2 text-sm;
  }
  
  .saap-btn-lg {
    @apply px-8 py-4 text-lg;
  }
  
  /* ========================================
     CARD COMPONENTS
  ======================================== */
  
  /* Base Card */
  .saap-card {
    @apply bg-white border border-saap-neutral-200;
    @apply rounded-saap-lg shadow-saap-sm;
    @apply p-saap-6 transition-all duration-300;
    @apply hover:shadow-saap-md hover:border-saap-primary-200;
    @apply hover:-translate-y-1;
  }
  
  /* Agent Card - Specialized for Agent Display */
  .saap-agent-card {
    @apply saap-card relative min-h-[200px];
    @apply hover:shadow-saap-primary-lg hover:border-saap-primary-300;
  }
  
  /* Card Header */
  .saap-card-header {
    @apply flex items-center justify-between mb-saap-4;
    @apply pb-saap-3 border-b border-saap-neutral-100;
  }
  
  /* Card Body */
  .saap-card-body {
    @apply space-y-saap-3;
  }
  
  /* Card Footer */
  .saap-card-footer {
    @apply flex items-center justify-between pt-saap-4;
    @apply mt-saap-4 border-t border-saap-neutral-100;
  }
  
  /* ========================================
     STATUS & BADGE COMPONENTS
  ======================================== */
  
  /* Base Badge */
  .saap-badge {
    @apply inline-flex items-center px-3 py-1;
    @apply text-xs font-semibold text-white;
    @apply rounded-full uppercase tracking-wider;
  }
  
  /* Status Badges */
  .saap-badge-active {
    @apply saap-badge bg-saap-success;
  }
  
  .saap-badge-inactive {
    @apply saap-badge bg-saap-neutral-400;
  }
  
  .saap-badge-processing {
    @apply saap-badge bg-saap-accent-500;
  }
  
  .saap-badge-error {
    @apply saap-badge bg-saap-error;
  }
  
  /* Agent Type Indicators */
  .saap-agent-indicator {
    @apply absolute top-4 right-4 w-3 h-3 rounded-full;
  }
  
  .saap-agent-jane {
    @apply bg-saap-jane;
  }
  
  .saap-agent-john {
    @apply bg-saap-john;
  }
  
  .saap-agent-lara {
    @apply bg-saap-lara;
  }
  
  .saap-agent-justus {
    @apply bg-saap-justus;
  }
  
  /* ========================================
     INPUT & FORM COMPONENTS
  ======================================== */
  
  /* Base Input */
  .saap-input {
    @apply w-full px-4 py-3 text-base;
    @apply bg-white border border-saap-neutral-300;
    @apply rounded-saap placeholder-saap-neutral-500;
    @apply focus:outline-none focus:ring-2 focus:ring-saap-primary-400 focus:border-saap-primary-400;
    @apply transition-all duration-200;
  }
  
  /* Textarea */
  .saap-textarea {
    @apply saap-input resize-y min-h-[100px];
  }
  
  /* Form Group */
  .saap-form-group {
    @apply space-y-saap-2;
  }
  
  /* Form Label */
  .saap-label {
    @apply block text-sm font-medium text-saap-neutral-700;
  }
  
  /* ========================================
     LAYOUT COMPONENTS
  ======================================== */
  
  /* Dashboard Grid */
  .saap-dashboard-grid {
    @apply grid gap-saap-6;
    @apply grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4;
  }
  
  /* Sidebar */
  .saap-sidebar {
    @apply bg-white border-r border-saap-neutral-200;
    @apply w-64 h-full flex flex-col;
  }
  
  /* Navigation */
  .saap-nav-item {
    @apply flex items-center px-4 py-3 text-sm font-medium;
    @apply text-saap-neutral-700 hover:text-saap-primary-600;
    @apply hover:bg-saap-primary-50 rounded-saap mx-2;
    @apply transition-all duration-200;
  }
  
  .saap-nav-item.active {
    @apply text-saap-primary-600 bg-saap-primary-100;
  }
  
  /* ========================================
     UTILITY CLASSES
  ======================================== */
  
  /* Typography Utilities */
  .saap-heading {
    @apply font-saap font-bold text-saap-neutral-900;
  }
  
  .saap-heading-1 {
    @apply saap-heading text-saap-5xl;
  }
  
  .saap-heading-2 {
    @apply saap-heading text-saap-4xl;
  }
  
  .saap-heading-3 {
    @apply saap-heading text-saap-3xl;
  }
  
  .saap-heading-4 {
    @apply saap-heading text-saap-2xl;
  }
  
  /* Body Text */
  .saap-body {
    @apply font-saap text-base text-saap-neutral-700 leading-relaxed;
  }
  
  .saap-body-sm {
    @apply font-saap text-sm text-saap-neutral-600;
  }
  
  /* Message Flow Visualization */
  .saap-message-flow {
    @apply flex items-center gap-saap-3 p-saap-4;
    @apply bg-saap-neutral-50 border-l-4 border-saap-primary-400;
    @apply rounded-r-saap my-saap-2;
  }
  
  /* Performance Metrics */
  .saap-metric-widget {
    @apply bg-gradient-to-br from-saap-primary-600 to-saap-primary-700;
    @apply text-white p-saap-5 rounded-saap-lg text-center;
    @apply relative overflow-hidden;
  }
  
  .saap-metric-number {
    @apply text-3xl font-bold leading-none mb-1;
  }
  
  .saap-metric-label {
    @apply text-sm opacity-90 font-medium uppercase tracking-wider;
  }
  
  /* Animation Utilities */
  .saap-fade-in {
    @apply animate-saap-fade-in;
  }
  
  .saap-slide-up {
    @apply animate-saap-slide-up;
  }
  
  .saap-pulse-gentle {
    @apply animate-saap-pulse-gentle;
  }
}

/* ========================================
   RESPONSIVE UTILITIES
======================================== */

@layer utilities {
  /* SAAP Responsive Text */
  .saap-text-responsive {
    @apply text-base saap-md:text-lg saap-lg:text-xl;
  }
  
  /* SAAP Responsive Padding */
  .saap-p-responsive {
    @apply p-saap-4 saap-md:p-saap-6 saap-lg:p-saap-8;
  }
  
  /* SAAP Responsive Grid */
  .saap-grid-responsive {
    @apply grid-cols-1 saap-md:grid-cols-2 saap-lg:grid-cols-3 saap-xl:grid-cols-4;
  }
}

/* ========================================
   DARK MODE SUPPORT (Future Enhancement)
======================================== */

@media (prefers-color-scheme: dark) {
  /* Dark mode styles will be added in v1.1 */
}

/* ========================================
   ACCESSIBILITY ENHANCEMENTS
======================================== */

/* High Contrast Mode */
@media (prefers-contrast: high) {
  .saap-btn-primary {
    @apply border-2 border-white;
  }
  
  .saap-card {
    @apply border-2 border-saap-neutral-400;
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}