sapiens-web3/client/src/index.css

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

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

:root {
  --background: hsl(210, 40%, 98%);
  --foreground: hsl(222.2, 84%, 4.9%);
  --card: hsl(0, 0%, 100%);
  --card-foreground: hsl(222.2, 84%, 4.9%);
  --popover: hsl(0, 0%, 100%);
  --popover-foreground: hsl(222.2, 84%, 4.9%);
  --primary: hsl(221.2, 83.2%, 53.3%);
  --primary-foreground: hsl(210, 40%, 98%);
  --secondary: hsl(210, 40%, 96%);
  --secondary-foreground: hsl(222.2, 84%, 4.9%);
  --muted: hsl(210, 40%, 96%);
  --muted-foreground: hsl(215.4, 16.3%, 46.9%);
  --accent: hsl(210, 40%, 96%);
  --accent-foreground: hsl(222.2, 84%, 4.9%);
  --destructive: hsl(0, 84.2%, 60.2%);
  --destructive-foreground: hsl(210, 40%, 98%);
  --border: hsl(214.3, 31.8%, 91.4%);
  --input: hsl(214.3, 31.8%, 91.4%);
  --ring: hsl(221.2, 83.2%, 53.3%);
  --chart-1: hsl(12, 76%, 61%);
  --chart-2: hsl(173, 58%, 39%);
  --chart-3: hsl(197, 37%, 24%);
  --chart-4: hsl(43, 74%, 66%);
  --chart-5: hsl(27, 87%, 67%);
  --sidebar: hsl(210, 40%, 96%);
  --sidebar-foreground: hsl(222.2, 84%, 4.9%);
  --sidebar-primary: hsl(221.2, 83.2%, 53.3%);
  --sidebar-primary-foreground: hsl(210, 40%, 98%);
  --sidebar-accent: hsl(210, 40%, 96%);
  --sidebar-accent-foreground: hsl(222.2, 84%, 4.9%);
  --sidebar-border: hsl(214.3, 31.8%, 91.4%);
  --sidebar-ring: hsl(221.2, 83.2%, 53.3%);
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-serif: Georgia, serif;
  --font-mono: Menlo, monospace;
  --radius: 0.75rem;
  --shadow-2xs: 0px 2px 0px 0px hsl(221.2, 83.2%, 53.3% / 0.00);
  --shadow-xs: 0px 2px 0px 0px hsl(221.2, 83.2%, 53.3% / 0.00);
  --shadow-sm: 0px 2px 0px 0px hsl(221.2, 83.2%, 53.3% / 0.00), 0px 1px 2px -1px hsl(221.2, 83.2%, 53.3% / 0.00);
  --shadow: 0px 2px 0px 0px hsl(221.2, 83.2%, 53.3% / 0.00), 0px 1px 2px -1px hsl(221.2, 83.2%, 53.3% / 0.00);
  --shadow-md: 0px 2px 0px 0px hsl(221.2, 83.2%, 53.3% / 0.00), 0px 2px 4px -1px hsl(221.2, 83.2%, 53.3% / 0.00);
  --shadow-lg: 0px 2px 0px 0px hsl(221.2, 83.2%, 53.3% / 0.00), 0px 4px 6px -1px hsl(221.2, 83.2%, 53.3% / 0.00);
  --shadow-xl: 0px 2px 0px 0px hsl(221.2, 83.2%, 53.3% / 0.00), 0px 8px 10px -1px hsl(221.2, 83.2%, 53.3% / 0.00);
  --shadow-2xl: 0px 2px 0px 0px hsl(221.2, 83.2%, 53.3% / 0.00);
  --tracking-normal: 0em;
  --spacing: 0.25rem;
}

.dark {
  --background: hsl(0, 0%, 0%);
  --foreground: hsl(200, 6.6667%, 91.1765%);
  --card: hsl(228, 9.8039%, 10%);
  --card-foreground: hsl(0, 0%, 85.0980%);
  --popover: hsl(0, 0%, 0%);
  --popover-foreground: hsl(200, 6.6667%, 91.1765%);
  --primary: hsl(221.2, 83.2%, 53.3%);
  --primary-foreground: hsl(210, 40%, 98%);
  --secondary: hsl(195.0000, 15.3846%, 94.9020%);
  --secondary-foreground: hsl(222.2, 84%, 4.9%);
  --muted: hsl(0, 0%, 9.4118%);
  --muted-foreground: hsl(210, 3.3898%, 46.2745%);
  --accent: hsl(205.7143, 70%, 7.8431%);
  --accent-foreground: hsl(221.2, 83.2%, 53.3%);
  --destructive: hsl(0, 84.2%, 60.2%);
  --destructive-foreground: hsl(210, 40%, 98%);
  --border: hsl(210, 5.2632%, 14.9020%);
  --input: hsl(207.6923, 27.6596%, 18.4314%);
  --ring: hsl(221.2, 83.2%, 53.3%);
  --chart-1: hsl(12, 76%, 61%);
  --chart-2: hsl(173, 58%, 39%);
  --chart-3: hsl(197, 37%, 24%);
  --chart-4: hsl(43, 74%, 66%);
  --chart-5: hsl(27, 87%, 67%);
  --sidebar: hsl(228, 9.8039%, 10%);
  --sidebar-foreground: hsl(0, 0%, 85.0980%);
  --sidebar-primary: hsl(221.2, 83.2%, 53.3%);
  --sidebar-primary-foreground: hsl(210, 40%, 98%);
  --sidebar-accent: hsl(205.7143, 70%, 7.8431%);
  --sidebar-accent-foreground: hsl(221.2, 83.2%, 53.3%);
  --sidebar-border: hsl(205.7143, 15.7895%, 26.0784%);
  --sidebar-ring: hsl(221.2, 83.2%, 53.3%);
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-serif: Georgia, serif;
  --font-mono: Menlo, monospace;
  --radius: 0.75rem;
  --shadow-2xs: 0px 2px 0px 0px hsl(221.2, 83.2%, 53.3% / 0.00);
  --shadow-xs: 0px 2px 0px 0px hsl(221.2, 83.2%, 53.3% / 0.00);
  --shadow-sm: 0px 2px 0px 0px hsl(221.2, 83.2%, 53.3% / 0.00), 0px 1px 2px -1px hsl(221.2, 83.2%, 53.3% / 0.00);
  --shadow: 0px 2px 0px 0px hsl(221.2, 83.2%, 53.3% / 0.00), 0px 1px 2px -1px hsl(221.2, 83.2%, 53.3% / 0.00);
  --shadow-md: 0px 2px 0px 0px hsl(221.2, 83.2%, 53.3% / 0.00), 0px 2px 4px -1px hsl(221.2, 83.2%, 53.3% / 0.00);
  --shadow-lg: 0px 2px 0px 0px hsl(221.2, 83.2%, 53.3% / 0.00), 0px 4px 6px -1px hsl(221.2, 83.2%, 53.3% / 0.00);
  --shadow-xl: 0px 2px 0px 0px hsl(221.2, 83.2%, 53.3% / 0.00), 0px 8px 10px -1px hsl(221.2, 83.2%, 53.3% / 0.00);
  --shadow-2xl: 0px 2px 0px 0px hsl(221.2, 83.2%, 53.3% / 0.00);
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply font-sans antialiased bg-background text-foreground;
    font-family: 'Inter', system-ui, sans-serif;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply tracking-tight;
  }
}

@layer components {
  .gradient-bg {
    background: linear-gradient(135deg, hsl(221.2, 83.2%, 53.3%) 0%, hsl(262.1, 83.3%, 57.8%) 100%);
  }
  
  .card-hover {
    transition: all 0.2s ease-in-out;
  }

  @keyframes float {
    0%, 100% {
      transform: translateY(0px);
    }
    50% {
      transform: translateY(-8px);
    }
  }

  .animate-float {
    animation: float 3s ease-in-out infinite;
  }

  @keyframes shake {
    0%, 100% {
      transform: translateX(0) rotate(0deg);
    }
    10%, 30%, 50%, 70%, 90% {
      transform: translateX(-2px) rotate(-1deg);
    }
    20%, 40%, 60%, 80% {
      transform: translateX(2px) rotate(1deg);
    }
  }

  .animate-shake {
    animation: shake 0.5s ease-in-out infinite;
  }

  @media (prefers-reduced-motion: reduce) {
    .animate-float {
      animation: none;
    }
    .animate-shake {
      animation: none;
    }
  }
  
  .card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px -8px rgba(0, 0, 0, 0.1);
  }
  
  .fade-in {
    animation: fadeIn 0.3s ease-in;
  }
  
  .prediction-card {
    background: linear-gradient(145deg, #f8fafc 0%, #e2e8f0 100%);
    border-left: 4px solid hsl(173, 58%, 39%);
  }
  
  .active-tab {
    background: hsl(221.2, 83.2%, 53.3%);
    color: white;
  }

  .line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

@keyframes fadeIn {
  from { 
    opacity: 0; 
    transform: translateY(10px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}