frontend/src/styles/index.css

@import "tailwindcss";

/*
 * FarmHelp - Custom Tailwind CSS Theme
 * Agricultural green palette with warm earth tones.
 */

@theme {
  /* Primary - Green (Agriculture) */
  --color-primary-50: #f0fdf4;
  --color-primary-100: #dcfce7;
  --color-primary-200: #bbf7d0;
  --color-primary-300: #86efac;
  --color-primary-400: #4ade80;
  --color-primary-500: #22c55e;
  --color-primary-600: #16a34a;
  --color-primary-700: #15803d;
  --color-primary-800: #166534;
  --color-primary-900: #14532d;
  --color-primary-950: #052e16;

  /* Secondary - Earth/Amber */
  --color-secondary-50: #fffbeb;
  --color-secondary-100: #fef3c7;
  --color-secondary-200: #fde68a;
  --color-secondary-300: #fcd34d;
  --color-secondary-400: #fbbf24;
  --color-secondary-500: #f59e0b;
  --color-secondary-600: #d97706;
  --color-secondary-700: #b45309;
  --color-secondary-800: #92400e;
  --color-secondary-900: #78350f;
  --color-secondary-950: #451a03;

  /* Accent - Sky Blue (Weather) */
  --color-accent-50: #f0f9ff;
  --color-accent-100: #e0f2fe;
  --color-accent-200: #bae6fd;
  --color-accent-300: #7dd3fc;
  --color-accent-400: #38bdf8;
  --color-accent-500: #0ea5e9;
  --color-accent-600: #0284c7;
  --color-accent-700: #0369a1;
  --color-accent-800: #075985;
  --color-accent-900: #0c4a6e;
  --color-accent-950: #082f49;

  /* Danger - Red (Alerts/Disease) */
  --color-danger-50: #fef2f2;
  --color-danger-100: #fee2e2;
  --color-danger-200: #fecaca;
  --color-danger-300: #fca5a5;
  --color-danger-400: #f87171;
  --color-danger-500: #ef4444;
  --color-danger-600: #dc2626;
  --color-danger-700: #b91c1c;
  --color-danger-800: #991b1b;
  --color-danger-900: #7f1d1d;
  --color-danger-950: #450a0a;

  /* Neutral - Slate */
  --color-neutral-50: #f8fafc;
  --color-neutral-100: #f1f5f9;
  --color-neutral-200: #e2e8f0;
  --color-neutral-300: #cbd5e1;
  --color-neutral-400: #94a3b8;
  --color-neutral-500: #64748b;
  --color-neutral-600: #475569;
  --color-neutral-700: #334155;
  --color-neutral-800: #1e293b;
  --color-neutral-900: #0f172a;
  --color-neutral-950: #020617;

  /* Font families */
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
    "Noto Color Emoji";
  --font-display: "Poppins", ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  /* Custom breakpoints */
  --breakpoint-xs: 475px;

  /* Custom animations */
  --animate-fade-in: fade-in 0.3s ease-out;
  --animate-slide-up: slide-up 0.4s ease-out;
  --animate-slide-down: slide-down 0.3s ease-out;
  --animate-pulse-slow: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  --animate-bounce-gentle: bounce-gentle 1s infinite;
  --animate-shimmer: shimmer 1.8s ease-in-out infinite;

  /* Shadows */
  --shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-card-hover: 0 10px 15px -3px rgb(0 0 0 / 0.1),
    0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-float: 0 20px 25px -5px rgb(0 0 0 / 0.1),
    0 8px 10px -6px rgb(0 0 0 / 0.1);
}

/* -----------------------------------------------------------------------
 * Keyframes
 * ----------------------------------------------------------------------- */

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

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

@keyframes bounce-gentle {
  0%,
  100% {
    transform: translateY(-5%);
    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
  }
  50% {
    transform: translateY(0);
    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* -----------------------------------------------------------------------
 * Base Layer
 * ----------------------------------------------------------------------- */

@layer base {
  html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    @apply bg-neutral-50 text-neutral-800 font-sans;
    min-height: 100vh;
    line-height: 1.6;
    transition: background-color 0.3s ease, color 0.3s ease;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply font-display font-semibold text-neutral-900;
    line-height: 1.3;
  }

  h1 {
    letter-spacing: -0.025em;
  }

  h2 {
    letter-spacing: -0.02em;
  }

  p {
    line-height: 1.7;
  }

  /* Improved focus-visible indicators for accessibility */
  :focus-visible {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px;
    border-radius: 4px;
  }

  /* Remove default focus ring, rely on focus-visible */
  :focus:not(:focus-visible) {
    outline: none;
  }

  /* Skip-to-content link (screen reader accessible) */
  .sr-skip-link {
    position: absolute;
    top: -9999px;
    left: -9999px;
    z-index: 9999;
  }

  .sr-skip-link:focus {
    position: fixed;
    top: 1rem;
    left: 1rem;
    padding: 0.75rem 1.5rem;
    background: var(--color-primary-600);
    color: white;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  }
}

/* -----------------------------------------------------------------------
 * Utility Classes
 * ----------------------------------------------------------------------- */

@layer utilities {
  /* Gradient background for headers */
  .bg-gradient-header {
    background: linear-gradient(
      135deg,
      var(--color-primary-600) 0%,
      var(--color-primary-700) 50%,
      var(--color-primary-800) 100%
    );
  }

  /* Shimmer effect for skeleton loaders */
  .shimmer {
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.4) 50%,
      transparent 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.8s ease-in-out infinite;
  }

  /* Card hover lift */
  .hover-lift {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
  }

  /* Feature tour spotlight */
  .tour-spotlight {
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.6);
    border-radius: 8px;
    position: fixed;
    z-index: 9998;
    pointer-events: none;
    transition: all 0.3s ease;
  }
}