@import "tailwindcss";
@config "../../tailwind.config.js";
@custom-variant dark (&:is(.dark *));

@layer base {
  :root {
    --background: #f5f8f3;
    --foreground: #10211d;
    --card: #ffffff;
    --card-foreground: #10211d;
    --popover: #ffffff;
    --popover-foreground: #10211d;
    --primary: #0f766e;
    --primary-foreground: #f8fffb;
    --secondary: #e9f5ee;
    --secondary-foreground: #14352f;
    --muted: #eef4ef;
    --muted-foreground: #5a6f68;
    --accent: #dff3d7;
    --accent-foreground: #244318;
    --destructive: #dc2626;
    --destructive-foreground: #fff7f7;
    --border: #dbe8df;
    --input: #cddbd2;
    --ring: #0f766e;
    --success: #16a34a;
    --info: #0284c7;
    --warning: #ca8a04;
    --error: #dc2626;
    --sidebar-background: #ffffff;
    --sidebar-foreground: #19332d;
    --sidebar-primary: #0f766e;
    --sidebar-primary-foreground: #ffffff;
    --sidebar-accent: #f0f7f3;
    --sidebar-accent-foreground: #10211d;
    --sidebar-border: #dbe8df;
    --sidebar-ring: #0f766e;
    --radius: 0.9rem;
  }

  .dark {
    --background: #071512;
    --foreground: #ecfdf5;
    --card: #0c1f1a;
    --card-foreground: #ecfdf5;
    --popover: #0c1f1a;
    --popover-foreground: #ecfdf5;
    --primary: #34d399;
    --primary-foreground: #042f2e;
    --secondary: #16342d;
    --secondary-foreground: #d1fae5;
    --muted: #10221e;
    --muted-foreground: #9db8ae;
    --accent: #173f2f;
    --accent-foreground: #dcfce7;
    --destructive: #f87171;
    --destructive-foreground: #450a0a;
    --border: #1e3b33;
    --input: #275246;
    --ring: #6ee7b7;
    --success: #22c55e;
    --info: #38bdf8;
    --warning: #facc15;
    --error: #f87171;
    --sidebar-background: #0a1a16;
    --sidebar-foreground: #dff7ee;
    --sidebar-primary: #34d399;
    --sidebar-primary-foreground: #042f2e;
    --sidebar-accent: #122a24;
    --sidebar-accent-foreground: #ecfdf5;
    --sidebar-border: #1e3b33;
    --sidebar-ring: #6ee7b7;
  }

  * {
    @apply box-border border-border;
  }

  html {
    @apply min-h-full bg-background;
    color-scheme: light;
  }

  html.dark {
    color-scheme: dark;
  }

  body {
    @apply m-0 min-h-screen bg-background text-foreground antialiased;
    background-image: radial-gradient(circle at 8% -10%, rgba(187, 247, 208, 0.7), transparent 34%), radial-gradient(circle at 92% 12%, rgba(20, 184, 166, 0.14), transparent 30%);
    font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  }

  .dark body {
    background-image: radial-gradient(circle at 8% -10%, rgba(16, 185, 129, 0.18), transparent 34%), radial-gradient(circle at 92% 12%, rgba(45, 212, 191, 0.1), transparent 30%);
  }

  a {
    @apply text-inherit no-underline;
  }

  button,
  input,
  textarea,
  select {
    font: inherit;
  }
}

@layer components {
  .card-agriculture {
    @apply rounded-3xl border border-emerald-900/10 bg-card/95 shadow-agriculture backdrop-blur dark:border-emerald-300/10 dark:bg-card/90;
  }

  .btn-agriculture {
    @apply inline-flex min-h-11 items-center justify-center rounded-2xl bg-gradient-to-br from-emerald-700 to-lime-800 px-5 font-black text-white shadow-glow transition hover:-translate-y-0.5 hover:shadow-agriculture disabled:cursor-not-allowed disabled:opacity-55;
  }

  .input-agriculture {
    @apply min-h-11 rounded-2xl border border-input bg-white/90 px-4 text-sm text-foreground outline-none transition placeholder:text-muted-foreground focus:border-primary focus:ring-4 focus:ring-primary/15 dark:bg-slate-950/50;
  }
}


@layer utilities {
  html.theme-switching {
    --theme-switch-duration: 360ms;
    --theme-switch-ease: cubic-bezier(0.22, 1, 0.36, 1);
  }

  html.theme-switching,
  html.theme-switching body,
  html.theme-switching *,
  html.theme-switching *::before,
  html.theme-switching *::after {
    transition-property: background-color, border-color, color, fill, stroke, box-shadow, outline-color, text-decoration-color, opacity, transform !important;
    transition-duration: var(--theme-switch-duration) !important;
    transition-timing-function: var(--theme-switch-ease) !important;
    transition-delay: 0ms !important;
  }

  @media (prefers-reduced-motion: reduce) {
    html.theme-switching,
    html.theme-switching body,
    html.theme-switching *,
    html.theme-switching *::before,
    html.theme-switching *::after {
      transition-duration: 1ms !important;
    }
  }
}
