@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  /* Primary Colors */
  --color-primary: #1E40AF; /* blue-800 */
  --color-primary-50: #EFF6FF; /* blue-50 */
  --color-primary-100: #DBEAFE; /* blue-100 */
  --color-primary-500: #3B82F6; /* blue-500 */
  --color-primary-600: #2563EB; /* blue-600 */
  --color-primary-700: #1D4ED8; /* blue-700 */
  --color-primary-800: #1E40AF; /* blue-800 */
  --color-primary-900: #1E3A8A; /* blue-900 */

  /* Secondary Colors */
  --color-secondary: #64748B; /* slate-500 */
  --color-secondary-50: #F8FAFC; /* slate-50 */
  --color-secondary-100: #F1F5F9; /* slate-100 */
  --color-secondary-200: #E2E8F0; /* slate-200 */
  --color-secondary-300: #CBD5E1; /* slate-300 */
  --color-secondary-400: #94A3B8; /* slate-400 */
  --color-secondary-500: #64748B; /* slate-500 */
  --color-secondary-600: #475569; /* slate-600 */
  --color-secondary-700: #334155; /* slate-700 */
  --color-secondary-800: #1E293B; /* slate-800 */
  --color-secondary-900: #0F172A; /* slate-900 */

  /* Accent Colors */
  --color-accent: #F59E0B; /* amber-500 */
  --color-accent-50: #FFFBEB; /* amber-50 */
  --color-accent-100: #FEF3C7; /* amber-100 */
  --color-accent-200: #FDE68A; /* amber-200 */
  --color-accent-300: #FCD34D; /* amber-300 */
  --color-accent-400: #FBBF24; /* amber-400 */
  --color-accent-500: #F59E0B; /* amber-500 */
  --color-accent-600: #D97706; /* amber-600 */
  --color-accent-700: #B45309; /* amber-700 */
  --color-accent-800: #92400E; /* amber-800 */
  --color-accent-900: #78350F; /* amber-900 */

  /* Background Colors */
  --color-background: #FAFBFC; /* gray-50 */
  --color-surface: #FFFFFF; /* white */

  /* Text Colors */
  --color-text-primary: #1F2937; /* gray-800 */
  --color-text-secondary: #6B7280; /* gray-500 */

  /* Status Colors */
  --color-success: #10B981; /* emerald-500 */
  --color-success-50: #ECFDF5; /* emerald-50 */
  --color-success-100: #D1FAE5; /* emerald-100 */
  --color-success-500: #10B981; /* emerald-500 */
  --color-success-600: #059669; /* emerald-600 */
  --color-success-700: #047857; /* emerald-700 */

  --color-warning: #F59E0B; /* amber-500 */
  --color-warning-50: #FFFBEB; /* amber-50 */
  --color-warning-100: #FEF3C7; /* amber-100 */
  --color-warning-500: #F59E0B; /* amber-500 */
  --color-warning-600: #D97706; /* amber-600 */
  --color-warning-700: #B45309; /* amber-700 */

  --color-error: #EF4444; /* red-500 */
  --color-error-50: #FEF2F2; /* red-50 */
  --color-error-100: #FEE2E2; /* red-100 */
  --color-error-500: #EF4444; /* red-500 */
  --color-error-600: #DC2626; /* red-600 */
  --color-error-700: #B91C1C; /* red-700 */

  /* Border Colors */
  --color-border: #E5E7EB; /* gray-200 */
  --color-border-light: rgba(229, 231, 235, 1); /* gray-200 with opacity */

  /* Shadow Variables */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* Animation Variables */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base Styles */
@layer base {
  body {
    font-family: 'Inter', sans-serif;
    background-color: var(--color-background);
    color: var(--color-text-primary);
    line-height: 1.6;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    line-height: 1.2;
  }

  .font-data {
    font-family: 'JetBrains Mono', monospace;
  }
}

/* Component Styles */
@layer components {
  .card {
    background-color: var(--color-surface);
    border-radius: 8px;
    box-shadow: var(--shadow-base);
    border: 1px solid var(--color-border-light);
    transition: box-shadow var(--transition-base);
  }

  .card:hover {
    box-shadow: var(--shadow-md);
  }

  .btn-primary {
    background-color: var(--color-primary);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-weight: 500;
    transition: background-color var(--transition-base);
  }

  .btn-primary:hover {
    background-color: var(--color-primary-700);
  }

  .btn-secondary {
    background-color: var(--color-secondary);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    font-weight: 500;
    transition: background-color var(--transition-base);
  }

  .btn-secondary:hover {
    background-color: var(--color-secondary-600);
  }

  .tooltip {
    position: relative;
    display: inline-block;
  }

  .tooltip:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-text-primary);
    color: white;
    padding: 0.5rem;
    border-radius: 4px;
    font-size: 0.875rem;
    white-space: nowrap;
    z-index: 1000;
    animation: fadeIn var(--transition-base);
  }

  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

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

  @keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }
}

/* Utility Classes */
@layer utilities {
  .text-data {
    font-family: 'JetBrains Mono', monospace;
  }

  .transition-micro {
    transition: all var(--transition-fast);
  }

  .transition-smooth {
    transition: all var(--transition-base);
  }

  .transition-slow {
    transition: all var(--transition-slow);
  }

  .shadow-subtle {
    box-shadow: var(--shadow-base);
  }

  .shadow-elevated {
    box-shadow: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
  }
}