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

/* 
   ------------------------------------------------------------
   第一层：全局基础设置 (@layer base)
   ------------------------------------------------------------
*/
@layer base {
  a, button, input, select, textarea, div[role="button"] {
    @apply transition-all duration-300 ease-industrial;
  }

  body {
    @apply text-clinical-text bg-white antialiased;
  }

  h1, h2, h3, h4 {
    @apply font-bold text-gray-900;
  }
}

/* 
   ------------------------------------------------------------
   第二层：组件提取 (@layer components)
   ------------------------------------------------------------
*/
@layer components {
  
  /* === 基础按钮布局 === */
  .btn-base {
    @apply inline-flex items-center justify-center px-6 py-3 font-medium rounded-industrial cursor-pointer active:scale-98 active:shadow-none select-none;
  }

  /* 主按钮：保持原样，强调行动 */
  .btn-primary {
    @apply btn-base bg-brand text-white hover:bg-brand-dark hover:-translate-y-[1px] hover:shadow-hover-brand;
  }

  /* 修改处 1：次级按钮 - 使用 Bio-Steel 边框，增加冷工业感 */
  .btn-outline {
    @apply btn-base border border-brand-secondary text-gray-600 bg-white hover:border-brand hover:text-brand hover:bg-brand-light/30;
  }

  /* 修改处 2：输入框 - 默认带边框，聚焦后变色 */
  .input-field {
    @apply w-full bg-white border border-brand-secondary rounded-industrial px-4 py-3 text-clinical-text outline-none placeholder-gray-400 focus:border-brand focus:shadow-focus-ring;
  }

  /* 修改处 3：产品卡片 - 默认边框淡色，悬停后主色高亮 */
  .card-product {
    @apply bg-white border border-brand-secondary/50 rounded-industrial p-4 overflow-hidden transition-all duration-300 hover:border-brand hover:shadow-hover-brand hover:-translate-y-1;
  }

  /* 修改处 4：新增全局分割线组件 */
  .section-divider {
    @apply w-full h-px bg-gradient-to-r from-transparent via-brand-secondary to-transparent opacity-50;
  }

  /* 装饰性形状 (Bio-Steel 浅色点缀) */
  .decor-shape {
    @apply text-brand-secondary opacity-30;
  }

  /* === 滚动出现的动画类 === */
  .reveal-node {
    @apply opacity-0 translate-y-8 transition-all duration-[800ms] ease-industrial;
  }
  
  .reveal-node.active {
    @apply opacity-100 translate-y-0;
  }
}