globals.css

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

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

.logo-text {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
  
  /* Glass Morphism Utilities */
  .glass {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: 0 8px 32px var(--glass-shadow);
  }
  
  .glass-sm {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: 0 4px 16px var(--glass-shadow);
  }
  
  .glass-lg {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    box-shadow: 0 12px 48px var(--glass-shadow);
  }
  
  .glass-hover {
    transition: all 0.3s ease;
  }
  
  .glass-hover:hover {
    background: rgba(255, 255, 255, 0.35);
    transform: translateY(-2px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
  }
  
  .dark .glass-hover:hover {
    background: rgba(40, 50, 80, 0.35);
  }
  
  /* Typography Utilities */
  .font-inter {
    font-family: 'Inter', sans-serif;
  }
  
  .font-poppins {
    font-family: 'Poppins', sans-serif;
  }
  
  /* Gradient Backgrounds */
  .bg-gradient-blue-white {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #dbeafe 100%);
  }
  
  .dark .bg-gradient-blue-white {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #1e3a8a 100%);
  }
}

@layer base {
  :root {
    /* Blueish-Whiteish Color Palette */
    --background: 220 20% 98%;
    --foreground: 220 15% 15%;
    
    /* Primary Blue Tones */
    --primary: 220 85% 55%;
    --primary-foreground: 0 0% 100%;
    --primary-light: 220 85% 65%;
    --primary-dark: 220 85% 45%;
    
    /* Secondary Blue Tones */
    --secondary: 210 70% 95%;
    --secondary-foreground: 220 15% 20%;
    
    /* Accent Blue */
    --accent: 200 80% 60%;
    --accent-foreground: 0 0% 100%;
    
    /* Neutral Whites and Light Grays */
    --card: 0 0% 100%;
    --card-foreground: 220 15% 15%;
    --popover: 0 0% 100%;
    --popover-foreground: 220 15% 15%;
    
    /* Muted Tones */
    --muted: 220 15% 95%;
    --muted-foreground: 220 10% 45%;
    
    /* Destructive */
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 100%;
    
    /* Borders and Inputs */
    --border: 220 15% 85%;
    --input: 220 15% 90%;
    --ring: 220 85% 55%;
    
    /* Glass Morphism Variables */
    --glass-bg: rgba(255, 255, 255, 0.25);
    --glass-border: rgba(255, 255, 255, 0.18);
    --glass-shadow: rgba(0, 0, 0, 0.1);
    --glass-blur: 10px;
    
    /* Chart colors */
    --chart-1: 220 85% 55%;
    --chart-2: 210 70% 60%;
    --chart-3: 200 75% 65%;
    --chart-4: 190 80% 70%;
    --chart-5: 180 85% 75%;
    
    --radius: 0.75rem;
    --sidebar-background: 0 0% 100%;
    --sidebar-foreground: 220 15% 15%;
    --sidebar-primary: 220 85% 55%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 210 70% 95%;
    --sidebar-accent-foreground: 220 15% 15%;
    --sidebar-border: 220 15% 85%;
    --sidebar-ring: 220 85% 55%;
  }
  .dark {
    /* Dark Mode Blueish-Whiteish Palette */
    --background: 220 25% 8%;
    --foreground: 220 15% 90%;
    
    /* Primary Blue Tones (Darker) */
    --primary: 220 75% 65%;
    --primary-foreground: 0 0% 100%;
    --primary-light: 220 80% 75%;
    --primary-dark: 220 70% 55%;
    
    /* Secondary Dark Blues */
    --secondary: 220 20% 15%;
    --secondary-foreground: 220 15% 90%;
    
    /* Accent Blue */
    --accent: 200 70% 70%;
    --accent-foreground: 220 25% 8%;
    
    /* Dark Cards */
    --card: 220 20% 12%;
    --card-foreground: 220 15% 90%;
    --popover: 220 20% 12%;
    --popover-foreground: 220 15% 90%;
    
    /* Muted Tones */
    --muted: 220 15% 18%;
    --muted-foreground: 220 10% 65%;
    
    /* Destructive */
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    
    /* Borders and Inputs */
    --border: 220 15% 20%;
    --input: 220 15% 25%;
    --ring: 220 75% 65%;
    
    /* Dark Mode Glass Morphism */
    --glass-bg: rgba(30, 40, 60, 0.25);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-shadow: rgba(0, 0, 0, 0.3);
    
    /* Chart colors */
    --chart-1: 220 75% 65%;
    --chart-2: 210 70% 70%;
    --chart-3: 200 65% 75%;
    --chart-4: 190 60% 80%;
    --chart-5: 180 55% 85%;
    
    --sidebar-background: 220 20% 12%;
    --sidebar-foreground: 220 15% 90%;
    --sidebar-primary: 220 75% 65%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 220 15% 18%;
    --sidebar-accent-foreground: 220 15% 90%;
    --sidebar-border: 220 15% 20%;
    --sidebar-ring: 220 75% 65%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  
  html {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  body {
    @apply bg-background text-foreground;
    font-family: 'Inter', sans-serif;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
  }
  
  h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    line-height: 1.2;
  }
}