@import "tailwindcss";
@import "@manacore/shared-tailwind/themes.css";

/* Scan shared packages for Tailwind classes */
@source "../../../packages/shared-ui/src";
@source "../../../packages/shared-theme-ui/src";
@source "../../../packages/shared-theme-ui/src/components";

/* Planta-specific CSS Variables */
@layer base {
  :root {
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;

    /* Border Radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;

    /* Planta primary color (green) */
    --planta-primary: 142 76% 36%;
  }
}

/* Utility Classes */
@layer components {
  /* Card styles */
  .card {
    background-color: hsl(var(--card));
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    border: 1px solid hsl(var(--border));
    transition: transform var(--transition-base), box-shadow var(--transition-base);
  }

  .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  }

  /* Plant card specific */
  .plant-card {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1;
  }

  .plant-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Button styles */
  .btn {
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-md);
    font-weight: 500;
    transition: all var(--transition-base);
    cursor: pointer;
    border: none;
  }

  .btn-primary {
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
  }

  .btn-primary:hover {
    background: hsl(var(--primary) / 0.9);
  }

  .btn-success {
    background: hsl(142 76% 36%);
    color: white;
  }

  .btn-success:hover {
    background: hsl(142 76% 30%);
  }

  /* Input styles */
  .input {
    padding: var(--spacing-sm) var(--spacing-md);
    border: 2px solid hsl(var(--border));
    border-radius: var(--radius-md);
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    transition: border-color var(--transition-fast);
  }

  .input:focus {
    outline: none;
    border-color: hsl(var(--primary));
  }

  /* Watering status indicators */
  .water-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
  }

  .water-status.overdue {
    color: hsl(0 84% 60%);
  }

  .water-status.soon {
    color: hsl(38 92% 50%);
  }

  .water-status.ok {
    color: hsl(142 76% 36%);
  }

  /* Upload zone */
  .upload-zone {
    border: 2px dashed hsl(var(--border));
    border-radius: var(--radius-lg);
    padding: var(--spacing-2xl);
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-base);
  }

  .upload-zone:hover,
  .upload-zone.dragover {
    border-color: hsl(var(--primary));
    background: hsl(var(--primary) / 0.05);
  }

  /* Health status badge */
  .health-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 500;
  }

  .health-badge.healthy {
    background: hsl(142 76% 36% / 0.1);
    color: hsl(142 76% 36%);
  }

  .health-badge.needs_attention {
    background: hsl(38 92% 50% / 0.1);
    color: hsl(38 92% 40%);
  }

  .health-badge.sick {
    background: hsl(0 84% 60% / 0.1);
    color: hsl(0 84% 50%);
  }
}

/* Legacy color variable compatibility */
@layer base {
  :root {
    --color-primary: var(--primary);
    --color-background: var(--background);
    --color-surface: var(--card);
    --color-text-primary: var(--foreground);
    --color-text-secondary: var(--muted-foreground);
    --color-border: var(--border);
    --color-success: 142 76% 36%;
    --color-warning: 38 92% 50%;
    --color-error: 0 84% 60%;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  }
}
