@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: #2563EB; /* blue-600 */
  --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 */
  
  /* Secondary Colors */
  --color-secondary: #64748B; /* slate-500 */
  --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 */
  
  /* Accent Colors */
  --color-accent: #F59E0B; /* amber-500 */
  --color-accent-50: #FFFBEB; /* amber-50 */
  --color-accent-100: #FEF3C7; /* amber-100 */
  --color-accent-400: #FBBF24; /* amber-400 */
  --color-accent-500: #F59E0B; /* amber-500 */
  --color-accent-600: #D97706; /* amber-600 */
  
  /* Background Colors */
  --color-background: #FEFEFE; /* custom warm white */
  --color-surface: #F8FAFC; /* slate-50 */
  
  /* Text Colors */
  --color-text-primary: #1E293B; /* slate-800 */
  --color-text-secondary: #64748B; /* slate-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-warning: #F59E0B; /* amber-500 */
  --color-warning-50: #FFFBEB; /* amber-50 */
  --color-warning-100: #FEF3C7; /* amber-100 */
  
  --color-error: #EF4444; /* red-500 */
  --color-error-50: #FEF2F2; /* red-50 */
  --color-error-100: #FEE2E2; /* red-100 */
  --color-error-500: #EF4444; /* red-500 */
  
  /* Shadow Variables */
  --shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-elevated: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-pronounced: 0 10px 25px rgba(0, 0, 0, 0.15);
  
  /* Animation Variables */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

@layer base {
  html {
    font-family: 'Inter', sans-serif;
  }
  
  body {
    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.3;
  }
  
  .font-mono {
    font-family: 'JetBrains Mono', monospace;
  }
}

@layer components {
  /* Micro-interactions */
  .btn-scale {
    transition: transform var(--transition-fast), opacity var(--transition-fast);
  }
  
  .btn-scale:active {
    transform: scale(0.98);
    opacity: 0.9;
  }
  
  /* Floating Action Button */
  .fab {
    box-shadow: var(--shadow-elevated);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  }
  
  .fab:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-pronounced);
  }
  
  /* Contextual Sidebar Animation */
  .sidebar-slide {
    transform: translateX(100%);
    transition: transform var(--transition-normal);
  }
  
  .sidebar-slide.open {
    transform: translateX(0);
  }
  
  /* Page Transition Animation */
  .page-transition {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity var(--transition-normal), transform var(--transition-normal);
  }
  
  .page-transition.loaded {
    opacity: 1;
    transform: translateY(0);
  }
  
  /* Card Component */
  .card {
    background-color: var(--color-background);
    border: 1px solid var(--color-secondary-200);
    border-radius: 6px;
    box-shadow: var(--shadow-subtle);
  }
  
  /* Input Component */
  .input {
    border: 1px solid var(--color-secondary-200);
    border-radius: 6px;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  }
  
  .input:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    outline: none;
  }
  
  /* Loading Skeleton */
  .skeleton {
    background: linear-gradient(90deg, var(--color-secondary-100) 25%, var(--color-secondary-200) 50%, var(--color-secondary-100) 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
  }
  
  @keyframes loading {
    0% {
      background-position: 200% 0;
    }
    100% {
      background-position: -200% 0;
    }
  }
}

@layer utilities {
  /* Fluid Typography */
  .text-fluid-sm {
    font-size: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
  }
  
  .text-fluid-base {
    font-size: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  }
  
  .text-fluid-lg {
    font-size: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
  }
  
  .text-fluid-xl {
    font-size: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
  }
  
  .text-fluid-2xl {
    font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  }
  
  .text-fluid-3xl {
    font-size: clamp(1.875rem, 1.6rem + 1.375vw, 2.5rem);
  }
}