@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  /* Primary Colors - Agricultural Heritage */
  --color-primary: #2D5016; /* deep-green-900 */
  --color-primary-50: #F0F4ED;
  --color-primary-100: #D9E5CC;
  --color-primary-200: #B8CFA0;
  --color-primary-300: #96B874;
  --color-primary-400: #7AA252;
  --color-primary-500: #5E8C30;
  --color-primary-600: #4A7C23; /* medium-green-700 */
  --color-primary-700: #3A6119;
  --color-primary-800: #2D5016; /* primary */
  --color-primary-900: #1F3A0F;

  /* Secondary Colors - Growth & Interaction */
  --color-secondary: #4A7C23; /* medium-green-700 */
  --color-secondary-50: #F2F6EE;
  --color-secondary-100: #E0E9D5;
  --color-secondary-200: #C5D6AB;
  --color-secondary-300: #A9C281;
  --color-secondary-400: #92B061;
  --color-secondary-500: #7B9E41;
  --color-secondary-600: #6A8C35;
  --color-secondary-700: #4A7C23; /* secondary */
  --color-secondary-800: #3A6119;
  --color-secondary-900: #2A4612;

  /* Accent Colors - Premium Gold */
  --color-accent: #B8860B; /* dark-goldenrod */
  --color-accent-50: #FDF9F0;
  --color-accent-100: #F9EFCC;
  --color-accent-200: #F2DD99;
  --color-accent-300: #EBCB66;
  --color-accent-400: #E4B933;
  --color-accent-500: #D4A017;
  --color-accent-600: #B8860B; /* accent */
  --color-accent-700: #9C6F09;
  --color-accent-800: #805807;
  --color-accent-900: #644105;

  /* Background Colors */
  --color-background: #FAFAFA; /* gray-50 */
  --color-surface: #F5F5F5; /* gray-100 */
  --color-surface-hover: #EEEEEE; /* gray-200 */

  /* Text Colors */
  --color-text-primary: #1A1A1A; /* gray-900 */
  --color-text-secondary: #666666; /* gray-600 */
  --color-text-muted: #9CA3AF; /* gray-400 */

  /* Status Colors */
  --color-success: #228B22; /* forest-green */
  --color-success-50: #F0F9F0;
  --color-success-100: #D4F4D4;
  --color-success-200: #A8E8A8;
  --color-success-300: #7CDD7C;
  --color-success-400: #50D150;
  --color-success-500: #228B22; /* success */
  --color-success-600: #1E7A1E;
  --color-success-700: #1A691A;
  --color-success-800: #165816;
  --color-success-900: #124712;

  --color-warning: #DAA520; /* goldenrod */
  --color-warning-50: #FDF8F0;
  --color-warning-100: #F9EDCC;
  --color-warning-200: #F2DA99;
  --color-warning-300: #EBC766;
  --color-warning-400: #E4B433;
  --color-warning-500: #DAA520; /* warning */
  --color-warning-600: #C2941D;
  --color-warning-700: #A9821A;
  --color-warning-800: #917017;
  --color-warning-900: #785E14;

  --color-error: #B22222; /* fire-brick */
  --color-error-50: #FDF2F2;
  --color-error-100: #F9D6D6;
  --color-error-200: #F2ADAD;
  --color-error-300: #EB8484;
  --color-error-400: #E45B5B;
  --color-error-500: #DC3232;
  --color-error-600: #B22222; /* error */
  --color-error-700: #9B1D1D;
  --color-error-800: #841818;
  --color-error-900: #6D1313;

  /* Shadows */
  --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-modal: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

  /* Transitions */
  --transition-fast: 250ms ease-out;
  --transition-modal: 300ms ease-out;
}

@layer base {
  body {
    font-family: 'Source Serif 4', serif;
    background-color: var(--color-background);
    color: var(--color-text-primary);
    line-height: 1.6;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    line-height: 1.3;
  }

  .font-mono {
    font-family: 'JetBrains Mono', monospace;
  }
}

@layer components {
  .btn-primary {
    @apply bg-primary text-white px-6 py-3 rounded-lg font-inter font-semibold transition-all duration-250 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2;
  }

  .btn-secondary {
    @apply bg-secondary text-white px-6 py-3 rounded-lg font-inter font-semibold transition-all duration-250 hover:bg-secondary-600 focus:outline-none focus:ring-2 focus:ring-secondary-500 focus:ring-offset-2;
  }

  .btn-accent {
    @apply bg-accent text-white px-6 py-3 rounded-lg font-inter font-semibold transition-all duration-250 hover:bg-accent-700 focus:outline-none focus:ring-2 focus:ring-accent-500 focus:ring-offset-2;
  }

  .card {
    @apply bg-surface rounded-lg p-6 shadow-card transition-all duration-250 hover:shadow-modal;
  }

  .form-input {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-250;
  }

  .text-gradient-primary {
    @apply bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent;
  }
}

@layer utilities {
  .duration-250 {
    transition-duration: 250ms;
  }

  .duration-300 {
    transition-duration: 300ms;
  }
}