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

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

/* USA Funding Applications - Success-focused Design System */

@layer base {
  :root {
    /* Success & Trust Colors */
    --success-primary: 147 65% 35%;    /* Professional green */
    --success-light: 147 40% 45%;      /* Lighter green */
    --success-glow: 147 60% 50%;       /* Bright green for highlights */
    
    /* Trust & Professional Colors - Logo Blue */
    --trust-primary: 213 100% 35%;     /* Logo blue */
    --trust-secondary: 213 80% 45%;    /* Medium blue */
    --trust-light: 213 60% 65%;       /* Light blue */
    
    /* Logo Colors */
    --logo-red: 10 85% 50%;            /* Logo red */
    --logo-red-light: 10 70% 60%;     /* Lighter red */
    --logo-blue: 213 100% 35%;        /* Logo blue */
    
    /* Neutral & Background */
    --background: 0 0% 99%;
    --foreground: 213 25% 15%;
    --surface: 0 0% 97%;
    --surface-elevated: 0 0% 100%;

    /* Warning & Alert Colors */
    --warning: 43 85% 55%;
    --warning-foreground: 0 0% 15%;
    
    /* Status Colors */
    --border: 213 20% 88%;
    --input: 213 20% 88%;
    --ring: 147 60% 50%;
    
    /* Component Tokens */
    --primary: 147 65% 35%;
    --primary-foreground: 0 0% 98%;
    
    --secondary: 213 85% 25%;
    --secondary-foreground: 0 0% 98%;
    
    --muted: 0 0% 95%;
    --muted-foreground: 213 25% 45%;
    
    --accent: 147 40% 45%;
    --accent-foreground: 0 0% 98%;
    
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;

    --card: 0 0% 100%;
    --card-foreground: 213 25% 15%;
    
    --popover: 0 0% 100%;
    --popover-foreground: 213 25% 15%;
    
    --radius: 0.75rem;
    
    /* Custom Design Tokens */
    --gradient-success: linear-gradient(135deg, hsl(var(--success-primary)), hsl(var(--success-light)));
    --gradient-trust: linear-gradient(135deg, hsl(var(--trust-primary)), hsl(var(--trust-secondary)));
    --gradient-logo: linear-gradient(135deg, hsl(var(--logo-red)), hsl(var(--logo-blue)));
    --gradient-subtle: linear-gradient(135deg, hsl(var(--background)), hsl(var(--surface)));
    --gradient-bg-pattern: radial-gradient(circle at 20% 50%, hsl(var(--success-primary) / 0.03) 0%, transparent 50%), 
                           radial-gradient(circle at 80% 20%, hsl(var(--trust-primary) / 0.03) 0%, transparent 50%),
                           radial-gradient(circle at 40% 80%, hsl(var(--success-light) / 0.02) 0%, transparent 50%);
    --shadow-success: 0 10px 30px -5px hsl(var(--success-primary) / 0.3);
    --shadow-elevated: 0 20px 40px -10px hsl(213 25% 15% / 0.15);
    --shadow-card-modern: 0 8px 32px -4px hsl(213 25% 15% / 0.12), 0 0 0 1px hsl(var(--border) / 0.5);
    --shadow-success-glow: 0 8px 32px -4px hsl(var(--success-primary) / 0.25), 0 0 0 1px hsl(var(--success-primary) / 0.1);
    --shadow-trust-glow: 0 8px 32px -4px hsl(var(--trust-primary) / 0.25), 0 0 0 1px hsl(var(--trust-primary) / 0.1);
    --shadow-logo: 0 10px 25px -5px hsl(var(--logo-red) / 0.3);
    
    /* Animation */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .dark {
    --background: 213 25% 8%;
    --foreground: 0 0% 95%;
    --surface: 213 25% 12%;
    --surface-elevated: 213 25% 15%;
    
    --success-primary: 147 55% 45%;
    --success-light: 147 40% 55%;
    --trust-primary: 213 75% 55%;
    --trust-secondary: 213 60% 65%;
    
    --card: 213 25% 12%;
    --card-foreground: 0 0% 95%;
    --border: 213 20% 25%;
  }
}

@layer base {
  * {
    @apply border-border;
    transition: var(--transition-smooth);
  }
  
  body {
    @apply bg-background text-foreground font-inter antialiased;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  }
  
  h1, h2, h3, h4, h5, h6 {
    @apply font-semibold tracking-tight;
  }
}

@layer components {
  .btn-success {
    @apply bg-gradient-to-r from-success-primary to-success-light text-white font-semibold px-8 py-4 rounded-xl shadow-lg transform hover:scale-105 transition-all duration-300 text-lg;
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.1);
  }
  
  .btn-success:hover {
    box-shadow: var(--shadow-success);
  }
  
  .btn-trust {
    @apply bg-gradient-to-r from-trust-primary to-trust-secondary text-white font-medium px-6 py-3 rounded-lg hover:opacity-90 transition-all duration-300;
  }
  
  .card-elevated {
    @apply bg-surface-elevated border border-border rounded-xl p-6;
    box-shadow: var(--shadow-card-modern);
    backdrop-filter: blur(8px);
  }
  
  .card-success {
    @apply bg-gradient-to-br from-surface-elevated to-success-primary/5 border border-success-primary/20 rounded-xl p-6;
    box-shadow: var(--shadow-success-glow);
  }
  
  .card-trust {
    @apply bg-gradient-to-br from-surface-elevated to-trust-primary/5 border border-trust-primary/20 rounded-xl p-6;
    box-shadow: var(--shadow-trust-glow);
  }
  
  .bg-pattern {
    background: var(--gradient-bg-pattern);
  }
  
  .success-badge {
    @apply bg-success-primary/10 text-success-primary px-4 py-2 rounded-full font-medium text-sm border border-success-primary/20;
  }
  
  .btn-logo {
    @apply bg-gradient-to-r from-logo-red to-logo-blue text-white font-semibold px-8 py-4 rounded-xl shadow-lg transform hover:scale-105 transition-all duration-300 text-lg;
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.1);
  }
  
  .btn-logo:hover {
    box-shadow: var(--shadow-logo);
  }
  
  .logo-accent {
    @apply bg-logo-red/10 text-logo-red border border-logo-red/20;
  }
}