/**
 * UC-UI Library Theme
 * 
 * Import this file in your application's styles.scss to get the 
 * UC-UI design system CSS custom properties.
 * 
 * Usage:
 *   @import 'uc-ui/theming';
 *   or
 *   @use 'uc-ui/theming';
 */

// ============================================================================
// CSS Custom Properties (Design System)
// ============================================================================
:root {
  // Primary Colors
  --uc-primary-color: #1e3a5f;
  --uc-primary-light: #2d5a87;
  --uc-primary-dark: #0d2137;
  
  // Accent Colors
  --uc-accent-color: #3b82f6;
  --uc-accent-light: #60a5fa;
  --uc-accent-dark: #2563eb;
  
  // Status Colors
  --uc-success-color: #16a34a;
  --uc-warning-color: #d97706;
  --uc-error-color: #dc2626;
  --uc-info-color: #2563eb;
  
  // Neutral Colors
  --uc-background-color: #f8fafc;
  --uc-surface-color: #ffffff;
  --uc-text-primary: #1e293b;
  --uc-text-secondary: #64748b;
  --uc-border-color: #e2e8f0;
  
  // Shadows
  --uc-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --uc-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --uc-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  
  // Border Radius
  --uc-radius-sm: 4px;
  --uc-radius-md: 8px;
  --uc-radius-lg: 16px;
  
  // Spacing
  --uc-spacing-xs: 4px;
  --uc-spacing-sm: 8px;
  --uc-spacing-md: 16px;
  --uc-spacing-lg: 24px;
  --uc-spacing-xl: 32px;

  // Legacy variable mapping (for backward compatibility)
  --primary-color: var(--uc-primary-color);
  --primary-light: var(--uc-primary-light);
  --primary-dark: var(--uc-primary-dark);
  --accent-color: var(--uc-accent-color);
  --success-color: var(--uc-success-color);
  --warning-color: var(--uc-warning-color);
  --error-color: var(--uc-error-color);
  --info-color: var(--uc-info-color);
  --background-color: var(--uc-background-color);
  --surface-color: var(--uc-surface-color);
  --text-primary: var(--uc-text-primary);
  --text-secondary: var(--uc-text-secondary);
  --border-color: var(--uc-border-color);
  --shadow-sm: var(--uc-shadow-sm);
  --shadow-md: var(--uc-shadow-md);
  --shadow-lg: var(--uc-shadow-lg);
  --radius-sm: var(--uc-radius-sm);
  --radius-md: var(--uc-radius-md);
  --radius-lg: var(--uc-radius-lg);
  --spacing-xs: var(--uc-spacing-xs);
  --spacing-sm: var(--uc-spacing-sm);
  --spacing-md: var(--uc-spacing-md);
  --spacing-lg: var(--uc-spacing-lg);
  --spacing-xl: var(--uc-spacing-xl);
}

// ============================================================================
// Utility Classes
// ============================================================================
.uc-text-success { color: var(--uc-success-color) !important; }
.uc-text-warning { color: var(--uc-warning-color) !important; }
.uc-text-error { color: var(--uc-error-color) !important; }
.uc-text-info { color: var(--uc-info-color) !important; }

.uc-bg-success { background-color: var(--uc-success-color) !important; }
.uc-bg-warning { background-color: var(--uc-warning-color) !important; }
.uc-bg-error { background-color: var(--uc-error-color) !important; }
.uc-bg-info { background-color: var(--uc-info-color) !important; }

// ============================================================================
// Status Badge
// ============================================================================
.uc-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
  
  &.uc-status-green {
    background-color: #dcfce7;
    color: #16a34a;
  }
  
  &.uc-status-yellow {
    background-color: #fef3c7;
    color: #d97706;
  }
  
  &.uc-status-red {
    background-color: #fee2e2;
    color: #dc2626;
  }
  
  &.uc-status-blue {
    background-color: #dbeafe;
    color: #2563eb;
  }
}

// ============================================================================
// Shimmer Animation
// ============================================================================
@keyframes uc-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.uc-shimmer {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: uc-shimmer 1.5s infinite;
}

// ============================================================================
// Markdown Styling
// ============================================================================
.uc-markdown-content {
  table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 20px 0;
    font-size: 13px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #e2e8f0;
    
    th, td {
      padding: 12px 16px;
      text-align: left;
      border-bottom: 1px solid #e2e8f0;
      vertical-align: top;
      line-height: 1.5;
    }
    
    th {
      background: linear-gradient(135deg, var(--uc-primary-color) 0%, var(--uc-primary-light) 100%);
      font-weight: 600;
      color: white;
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    
    td {
      background: white;
      color: #374151;
      
      &:first-child {
        font-weight: 500;
        color: #1f2937;
      }
    }
    
    tbody tr {
      transition: background-color 0.15s ease;
      
      &:nth-child(even) td {
        background: #f8fafc;
      }
      
      &:hover td {
        background: #e0f2fe;
      }
      
      &:last-child td {
        border-bottom: none;
      }
    }
  }
  
  h1, h2, h3, h4, h5, h6 {
    color: #1f2937;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    font-weight: 600;
    line-height: 1.3;
  }
  
  h1 { font-size: 1.75rem; border-bottom: 2px solid #e5e7eb; padding-bottom: 0.5rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.25rem; }
  h4 { font-size: 1.125rem; }
  
  p {
    margin: 0.75em 0;
    line-height: 1.7;
    color: #374151;
  }
  
  ul, ol {
    padding-left: 1.5em;
    margin: 0.75em 0;
    
    li {
      margin: 0.5em 0;
      line-height: 1.6;
    }
  }
  
  strong {
    font-weight: 600;
    color: var(--uc-primary-color);
  }
  
  code {
    background: #f3f4f6;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Roboto Mono', monospace;
    font-size: 0.875em;
    color: #d63384;
  }
  
  pre {
    background: #1f2937;
    color: #e5e7eb;
    padding: 1rem;
    border-radius: 8px;
    overflow-x: auto;
    margin: 1em 0;
    
    code {
      background: transparent;
      color: inherit;
      padding: 0;
    }
  }
  
  blockquote {
    border-left: 4px solid var(--uc-accent-color);
    padding-left: 1rem;
    margin: 1em 0;
    color: #6b7280;
    font-style: italic;
    background: #f8fafc;
    padding: 1rem 1rem 1rem 1.5rem;
    border-radius: 0 8px 8px 0;
  }
}