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

/* Flora Hire Design System - Nature-inspired professional design */

@layer base {
  :root {
    /* Nature-inspired color palette */
    --background: 0 0% 100%;
    --foreground: 142 47% 8%;

    --card: 0 0% 100%;
    --card-foreground: 142 47% 8%;

    --popover: 0 0% 100%;
    --popover-foreground: 142 47% 8%;

    /* Primary green palette */
    --primary: 142 69% 58%;
    --primary-foreground: 0 0% 100%;
    --primary-light: 142 69% 68%;
    --primary-dark: 142 69% 48%;

    /* Secondary natural tones */
    --secondary: 140 20% 93%;
    --secondary-foreground: 142 47% 8%;

    --muted: 140 15% 96%;
    --muted-foreground: 142 20% 40%;

    --accent: 52 95% 85%;
    --accent-foreground: 142 47% 8%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 100%;

    --border: 140 15% 92%;
    --input: 140 15% 92%;
    --ring: 142 69% 58%;

    /* Nature gradients */
    --gradient-primary: linear-gradient(135deg, hsl(var(--primary)), hsl(var(--primary-light)));
    --gradient-hero: linear-gradient(135deg, hsl(142 69% 58%) 0%, hsl(120 60% 70%) 50%, hsl(85 85% 75%) 100%);
    --gradient-subtle: linear-gradient(180deg, hsl(var(--background)), hsl(140 20% 99%));

    /* Shadows with green tint */
    --shadow-soft: 0 4px 6px -1px hsl(142 69% 58% / 0.1);
    --shadow-medium: 0 10px 15px -3px hsl(142 69% 58% / 0.1);
    --shadow-large: 0 25px 50px -12px hsl(142 69% 58% / 0.25);

    --radius: 0.75rem;
  }

  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  }

  /* Color utilities using CSS custom properties */
  .text-primary {
    color: hsl(var(--primary));
  }
  
  .text-primary-foreground {
    color: hsl(var(--primary-foreground));
  }
  
  .bg-primary {
    background-color: hsl(var(--primary));
  }
  
  .bg-secondary {
    background-color: hsl(var(--secondary));
  }
  
  .border-border {
    border-color: hsl(var(--border));
  }
}

@layer components {
  /* Button Components */
  .btn {
    @apply inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50;
  }
  
  .btn-primary {
    @apply btn bg-primary text-primary-foreground hover:bg-primary/90 px-4 py-2;
  }
  
  .btn-secondary {
    @apply btn bg-secondary text-secondary-foreground hover:bg-secondary/80 px-4 py-2;
  }
  
  .btn-outline {
    @apply btn border border-input bg-background hover:bg-accent hover:text-accent-foreground px-4 py-2;
  }
  
  .btn-ghost {
    @apply btn hover:bg-accent hover:text-accent-foreground px-4 py-2;
  }
  
  .btn-success {
    @apply btn bg-primary text-primary-foreground hover:bg-primary/90 px-4 py-2;
  }
  
  .btn-hero {
    @apply btn bg-gradient-to-r from-green-600 to-green-500 text-white hover:from-green-700 hover:to-green-600 px-6 py-3 text-base font-semibold;
  }
  
  .btn-lg {
    @apply px-6 py-3 text-base;
  }
  
  .btn-sm {
    @apply px-3 py-1.5 text-sm;
  }

  /* Card Components */
  .card {
    @apply rounded-lg border bg-card text-card-foreground shadow-sm;
  }
  
  .card-glass {
    @apply bg-white/90 backdrop-blur-sm border border-white/20;
  }

  /* Input Components */
  .input {
    @apply flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
  }

  /* Navigation Components */
  .nav-link {
    @apply text-foreground hover:text-primary transition-colors duration-200;
  }
  
  .nav-link-active {
    @apply text-primary font-medium;
  }

  /* Badge Components */
  .badge {
    @apply inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors;
  }
  
  .badge-primary {
    @apply border-transparent bg-primary text-primary-foreground;
  }
  
  .badge-secondary {
    @apply border-transparent bg-secondary text-secondary-foreground;
  }
  
  .badge-success {
    @apply border-transparent bg-green-500 text-white;
  }
  
  .badge-warning {
    @apply border-transparent bg-yellow-500 text-white;
  }

  /* Layout helpers */
  .container {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }
  
  .section {
    @apply py-16 lg:py-24;
  }
  
  .section-sm {
    @apply py-8 lg:py-12;
  }

  /* Flora-specific components */
  .flora-gradient {
    background: var(--gradient-hero);
  }
  
  .flora-shadow {
    box-shadow: var(--shadow-medium);
  }
  
  .flora-card {
    @apply card p-6 hover:shadow-lg transition-all duration-300;
  }
  
  .flora-hero-overlay {
    @apply absolute inset-0 bg-gradient-to-r from-black/60 via-black/40 to-transparent;
  }

  /* Utility classes for Flora design */
  .text-shadow {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  }
  
  .glass-blur {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  /* Tab Components */
  .tab-button {
    @apply py-4 px-4 border-b-2 font-medium text-sm transition-colors whitespace-nowrap flex items-center;
  }

  .tab-button:not(.active) {
    @apply border-transparent text-muted-foreground hover:text-foreground;
  }

  .tab-button.active {
    @apply border-primary text-primary;
  }

  /* Settings Components */
  .setting-row {
    @apply py-4 border-b border-border last:border-b-0;
  }
}

@layer utilities {
  /* Animation utilities */
  .animate-fade-in {
    animation: fadeIn 0.3s ease-in;
  }

  .animate-fade-out {
    animation: fadeOut 0.3s ease-out;
  }

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

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